@globalpayments/vega 2.34.1 → 2.36.0

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

@@ -2,52 +2,53 @@
 
 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 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 accessibility = require('./accessibility-bfa227f6.js');
-const changeManager = require('./change-manager-bda1d107.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
-const textColorToolbarButtonSlimmer = require('./text-color-toolbar-button-slimmer-21a166e4.js');
-const internalIconManager = require('./internal-icon-manager-2282a62f.js');
-const contentState = require('./content-state-6a5b9736.js');
-const node_abstract = require('./node.abstract-f8075f84.js');
-const textNode = require('./text-node-494856f3.js');
-const blockAnnotation_abstract = require('./block-annotation.abstract-4d88b939.js');
-const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-9aeabcdc.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-73201c53.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const vegaInternalEventId = require('./vega-internal-event-id-b12071ea.js');
+const imageAnnotationAction = require('./image-annotation-action-4135ca69.js');
+const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
+const contentState = require('./content-state-2336e368.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-c3c07af5.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-8d4d2723.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-994eb848.js');
 const timer = require('./timer-5f33058b.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
-const ui = require('./ui-b5906704.js');
+const ui = require('./ui-5fd9b267.js');
 const staticSubjectTitle = require('./static-subject-title-d66b88fb.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-e97b5f29.js');
-require('./vega-dialog-controller-aaf1f43e.js');
-require('./icon-manager-36dcfb65.js');
-require('./translation-f6b7ee84.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e1a6e5ad.js');
+require('./vega-skeleton-loader-controller-7dac484f.js');
+require('./feature-flag-controller-7b22e598.js');
+require('./vega-dialog-controller-fe610705.js');
+require('./icon-manager-edc2400b.js');
+require('./translation-b9be41e0.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
 const trashCan = require('./trash-can-46a5e19a.js');
-const remoteInvocationRegistry = require('./remote-invocation-registry-71a45468.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-ff9af278.js');
 require('./type-guard-4ba85fdc.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./internal-vega-z-index-manager-e24e4309.js');
-require('./number-4816603d.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./page-resize-observer-slimmer-e54fa9d4.js');
-require('./breakpoints-17d6c4c7.js');
-require('./internal-vega-event-manager-d7643ec6.js');
+require('./dynamic-slimmer-f31fdfd7.js');
 require('./string-21427167.js');
-require('./mutation-observer-slimmer-98bbbdf0.js');
+require('./page-resize-observer-slimmer-bb1eaebe.js');
+require('./breakpoints-17d6c4c7.js');
+require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-e5a7f85a.js');
 require('./array-5adef7b2.js');
+require('./number-4816603d.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
+require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./index-8b247c17.js');
 
 var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -60,26 +61,26 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderHintMessage = () => {
-      return globalSlimmerRegistry.h("vega-text", null, this.hint);
+      return index.h("vega-text", null, this.hint);
     };
     this.renderTextContent = () => {
-      return (globalSlimmerRegistry.h("div", { class: {
+      return (index.h("div", { class: {
           'rich-text-editor-container': true,
           'disabled': this.disabled,
         }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
-        globalSlimmerRegistry.h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
+        index.h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
         this.renderCharacterCounter()));
     };
     this.renderCharacterCounter = () => {
-      return (globalSlimmerRegistry.h("div", { class: {
+      return (index.h("div", { class: {
           'text-editor-counter': true,
           'counter-exceed-max-length': false,
         }, style: { display: 'none' } },
-        globalSlimmerRegistry.h("span", null, "0"),
-        globalSlimmerRegistry.h("span", null, "/100")));
+        index.h("span", null, "0"),
+        index.h("span", null, "/100")));
     };
     this.renderErrorMessage = () => {
-      return globalSlimmerRegistry.h("div", { class: "vega-error vega-hidden" });
+      return index.h("div", { class: "vega-error vega-hidden" });
     };
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
@@ -89,7 +90,7 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
    */
   componentDidRender() {
-    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalComponentDidRender), {});
+    changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalComponentDidRender), {});
   }
   /**
    * Returns the HTMLElement reference of the rich text container.
@@ -126,10 +127,10 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
   render() {
-    return globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderRichTextEditor());
+    return index.h(index.Host, null, this.renderRichTextEditor());
   }
   renderRichTextEditor() {
-    return (globalSlimmerRegistry.h("vega-flex", { direction: "col", gap: "0", ref: (flex) => (this.richTextWrapperRef = flex) },
+    return (index.h("vega-flex", { direction: "col", gap: "0", ref: (flex) => (this.richTextWrapperRef = flex) },
       this.renderLabel(),
       this.hint && this.renderHintMessage(),
       this.toolbarRenderer.render(),
@@ -137,7 +138,7 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderErrorMessage()));
   }
   renderLabel() {
-    return (this.label && (globalSlimmerRegistry.h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
+    return (this.label && (index.h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
   }
 }
 __decorate$y([
@@ -214,8 +215,8 @@ class ToolbarRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
   }
   render() {
-    return (globalSlimmerRegistry.h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
-      return (globalSlimmerRegistry.h("div", { class: "toolbar-btn-group" }, group.map((item) => {
+    return (index.h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
+      return (index.h("div", { class: "toolbar-btn-group" }, group.map((item) => {
         return this.getToolbarBtnRenderer(item).render();
       })));
     })));
@@ -277,7 +278,7 @@ var __decorate$w = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class BoldToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class BoldToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'bold',
@@ -290,22 +291,22 @@ class BoldToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
     const bold = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new contentState.BoldAnnotationAction(!bold)));
   }
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
-      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return selectedNodes.some((node) => {
       var _a;
-      return ((_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE);
+      return ((_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
     });
   }
 }
@@ -323,7 +324,7 @@ const italic = {
 /**
  * Action to toggle the italic annotation
  */
-class ItalicAnnotationAction extends textNode.TextSplittableAction {
+class ItalicAnnotationAction extends contentState.TextSplittableAction {
   constructor(italic) {
     super();
     this.isFlushable = true;
@@ -335,7 +336,7 @@ class ItalicAnnotationAction extends textNode.TextSplittableAction {
    * @returns {ItalicAnnotation} The annotation
    */
   toAnnotation() {
-    return new textNode.ItalicAnnotation(this.italic);
+    return new contentState.ItalicAnnotation(this.italic);
   }
 }
 
@@ -345,7 +346,7 @@ var __decorate$v = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class ItalicToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'italic',
@@ -355,23 +356,23 @@ class ItalicToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarBu
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
-      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
   }
   onClick() {
     const italic = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new ItalicAnnotationAction(!italic)));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return selectedNodes.some((node) => {
       var _a;
-      return ((_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE);
+      return ((_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
     });
   }
 }
@@ -389,7 +390,7 @@ const underline = {
 /**
  * Action to toggle the underline annotation
  */
-class UnderlineAnnotationAction extends textNode.TextSplittableAction {
+class UnderlineAnnotationAction extends contentState.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -401,7 +402,7 @@ class UnderlineAnnotationAction extends textNode.TextSplittableAction {
    * @returns {UnderlineAnnotation} the annotation
    */
   toAnnotation() {
-    return new textNode.UnderlineAnnotation(this.underline);
+    return new contentState.UnderlineAnnotation(this.underline);
   }
 }
 
@@ -411,7 +412,7 @@ var __decorate$u = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class UnderlineToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'underline',
@@ -421,26 +422,26 @@ class UnderlineToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolba
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => {
         var _a;
-        return (_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.UNDERLINE)) === null || _a === void 0 ? void 0 : _a.underline;
+        return (_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.UNDERLINE)) === null || _a === void 0 ? void 0 : _a.underline;
       }));
   }
   onClick() {
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new UnderlineAnnotationAction(!selected)));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return selectedNodes.some((node) => {
       var _a;
-      return ((_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE);
+      return ((_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
     });
   }
 }
@@ -461,7 +462,7 @@ var __decorate$t = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class TextStylesToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-size',
@@ -491,19 +492,19 @@ class TextStylesToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (globalSlimmerRegistry.h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
+    return (index.h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
         this.addDropdownObserver(ref);
       } },
       renderBtn({ showArrowIcon: true }),
-      globalSlimmerRegistry.h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())));
+      index.h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())));
   }
   renderDropdownContent() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
+    return (index.h(index.Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
       const textStyleAnnotation = new contentState.TextStyleAnnotation(item.key);
-      const boldAnnotation = new textNode.BoldAnnotation(item.bold);
-      return (globalSlimmerRegistry.h("vega-dropdown-item", { key: item.key, itemKey: item.key },
-        globalSlimmerRegistry.h("vega-box", { padding: { right: 'size-20' } },
-          globalSlimmerRegistry.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, item.label))));
+      const boldAnnotation = new contentState.BoldAnnotation(item.bold);
+      return (index.h("vega-dropdown-item", { key: item.key, itemKey: item.key },
+        index.h("vega-box", { padding: { right: 'size-20' } },
+          index.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, item.label))));
     })));
   }
   isSelected() {
@@ -511,10 +512,10 @@ class TextStylesToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE));
+    return selectedNodes.some((node) => node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE));
   }
   addDropdownObserver(dropdownRef) {
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaDropdownClick, this.handleDropdownItemClick);
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectFactory.VegaDropdownClick, this.handleDropdownItemClick);
   }
   getSelectedSourceKey() {
     const currentSelectedBlocks = this.selectionController
@@ -523,7 +524,7 @@ class TextStylesToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
     const isSameType = currentSelectedBlocks.length > 0 &&
       currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
     if (isSameType) {
-      const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.TEXT_STYLE);
+      const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.TEXT_STYLE);
       return blockAnnotation.textStyle;
     }
     return '';
@@ -581,7 +582,7 @@ var __decorate$s = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class ClearStyleToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-slash',
@@ -596,14 +597,14 @@ class ClearStyleToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
   onClick() {
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => {
-      node.apply(new textNode.ClearFormattingAnnotationAction());
+      node.apply(new contentState.ClearFormattingAnnotationAction());
     });
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE));
+    return selectedNodes.some((node) => node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE));
   }
 }
 (() => {
@@ -625,7 +626,7 @@ var __decorate$r = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class CodeToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class CodeToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'code-simple',
@@ -636,21 +637,21 @@ class CodeToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
-      .forEach((node) => node.apply(new textNode.CodeAnnotationAction(!selected)));
+      .filter((node) => node instanceof contentState.RTETextNode)
+      .forEach((node) => node.apply(new contentState.CodeAnnotationAction(!selected)));
   }
   isSelected() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedNodes.length > 0 &&
       selectedNodes
-        .filter((node) => node instanceof textNode.RTETextNode)
-        .map((node) => node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.CODE))
+        .filter((node) => node instanceof contentState.RTETextNode)
+        .map((node) => node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE))
         .every((annotation) => annotation && annotation.code));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.LINK) ||
-      node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE));
+    return selectedNodes.some((node) => node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK) ||
+      node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE));
   }
 }
 (() => {
@@ -667,7 +668,7 @@ const strikethrough = {
 /**
  * Action to toggle the strikethrough annotation
  */
-class StrikethroughAnnotationAction extends textNode.TextSplittableAction {
+class StrikethroughAnnotationAction extends contentState.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -679,7 +680,7 @@ class StrikethroughAnnotationAction extends textNode.TextSplittableAction {
    * @returns {StrikethroughAnnotation} the annotation
    */
   toAnnotation() {
-    return new textNode.StrikethroughAnnotation(this.strikethrough);
+    return new contentState.StrikethroughAnnotation(this.strikethrough);
   }
 }
 
@@ -689,7 +690,7 @@ var __decorate$q = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class StrikethroughToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'strikethrough',
@@ -699,26 +700,26 @@ class StrikethroughToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.To
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => {
         var _a;
-        return (_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.STRIKETHROUGH)) === null || _a === void 0 ? void 0 : _a.strikethrough;
+        return (_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.STRIKETHROUGH)) === null || _a === void 0 ? void 0 : _a.strikethrough;
       }));
   }
   onClick() {
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new StrikethroughAnnotationAction(!selected)));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return selectedNodes.some((node) => {
       var _a;
-      return ((_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.IMAGE);
+      return ((_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
     });
   }
 }
@@ -736,7 +737,7 @@ const link = {
 /**
  * Action to change the selection range
  */
-class SelectionChangeAction extends textNode.AnnotationAction {
+class SelectionChangeAction extends contentState.AnnotationAction {
   constructor(range) {
     super();
     this.isFlushable = false;
@@ -748,7 +749,7 @@ class SelectionChangeAction extends textNode.AnnotationAction {
    * @returns {SelectionRangeAnnotation} The annotation
    */
   toAnnotation() {
-    return new textNode.SelectionRangeAnnotation(this.range);
+    return new contentState.SelectionRangeAnnotation(this.range);
   }
 }
 
@@ -758,7 +759,7 @@ var __decorate$p = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class LinkToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'link',
@@ -773,7 +774,7 @@ class LinkToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
           const textChanged = text !== this.currentSelectedText;
           const groupKey = createPublicApiRuntimeMetricsSlimmer.generateUUID();
           this.currentSelectedNodes.forEach((node) => {
-            node.apply(new SelectionChangeAction(this.currentRange)).apply(new textNode.LinkAnnotationAction({
+            node.apply(new SelectionChangeAction(this.currentRange)).apply(new contentState.LinkAnnotationAction({
               link: { href: url, groupKey: groupKey },
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
@@ -785,13 +786,13 @@ class LinkToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (globalSlimmerRegistry.h("div", { class: "toolbar-btn-link-wrapper", ref: (ref) => (this.linkBtnWrapperRef = ref) },
+    return (index.h("div", { class: "toolbar-btn-link-wrapper", ref: (ref) => (this.linkBtnWrapperRef = ref) },
       renderBtn(),
-      globalSlimmerRegistry.h("vega-rich-text-link-editor", { resetStatusAfterHide: false, status: "linkEdit", ref: (ref) => {
+      index.h("vega-rich-text-link-editor", { resetStatusAfterHide: false, status: "linkEdit", ref: (ref) => {
           if (ref) {
             this.linkEditorRef = ref;
           }
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, this.handleLinkEditorChange);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.handleLinkEditorChange);
         } })));
   }
   isSelected() {
@@ -803,9 +804,9 @@ class LinkToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
     return (selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return !(node instanceof textNode.RTETextNode) ||
-          node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.LINK) ||
-          ((_a = node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
+        return !(node instanceof contentState.RTETextNode) ||
+          node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK) ||
+          ((_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));
   }
   onClick() {
@@ -824,7 +825,7 @@ class LinkToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
     // Element appender will control the show and hide logic except for the first time.
     if (!this.linkEditorRef.target) {
       this.linkEditorRef.target = this.linkBtnWrapperRef;
-      void textNode.waitForComponentDidRender(this.linkEditorRef).then(() => {
+      void contentState.waitForComponentDidRender(this.linkEditorRef).then(() => {
         void this.linkEditorRef.show();
       });
     }
@@ -844,7 +845,7 @@ const indent = {
 /**
  * Action to toggle block indent annotation
  */
-class IndentAnnotationAction extends textNode.AnnotationAction {
+class IndentAnnotationAction extends contentState.AnnotationAction {
   constructor(indent) {
     super();
     this.isFlushable = true;
@@ -866,7 +867,7 @@ var __decorate$o = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class MoreIndentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'indent',
@@ -887,7 +888,7 @@ class MoreIndentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
       var _a, _b;
-      const indent = (_b = (_a = item.getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      const indent = (_b = (_a = item.getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
       item.apply(new IndentAnnotationAction(indent + 1));
     });
   }
@@ -909,7 +910,7 @@ var __decorate$n = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class LessIndentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'outdent',
@@ -930,7 +931,7 @@ class LessIndentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
       var _a, _b;
-      const indent = (_b = (_a = item.getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      const indent = (_b = (_a = item.getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
       const newIndent = indent > 1 ? indent - 1 : 0;
       item.apply(new IndentAnnotationAction(newIndent));
     });
@@ -953,7 +954,7 @@ var __decorate$m = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class ImageToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class ImageToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
@@ -989,16 +990,16 @@ class ImageToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarBut
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (globalSlimmerRegistry.h("vega-box", null,
+    return (index.h("vega-box", null,
       renderBtn({ showArrowIcon: false }),
-      globalSlimmerRegistry.h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
+      index.h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
   }
   isSelected() {
     return false;
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.LINK));
+    return selectedNodes.some((node) => node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK));
   }
 }
 (() => {
@@ -1025,10 +1026,10 @@ const ListOL = {
 /**
  * Action to toggle bullet annotation
  */
-class TransformListAction extends node_abstract.ModifyContentAction {
+class TransformListAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(listType, selectedBlocks) {
     super();
-    this.type = node_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK;
     this.isFlushable = true;
     this.listType = listType;
     this.selectedBlocks = selectedBlocks;
@@ -1038,10 +1039,10 @@ class TransformListAction extends node_abstract.ModifyContentAction {
 /**
  * Action to toggle bullet annotation
  */
-class TransformParagraphAction extends node_abstract.ModifyContentAction {
+class TransformParagraphAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(selectedBlocks) {
     super();
-    this.type = node_abstract.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK;
     this.isFlushable = true;
     this.selectedBlocks = selectedBlocks;
   }
@@ -1053,7 +1054,7 @@ var __decorate$l = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class BulletsToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class BulletsToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -1118,7 +1119,7 @@ var __decorate$k = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class NumbersToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class NumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ol',
@@ -1181,7 +1182,7 @@ var __decorate$j = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class BulletsNumbersToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -1201,14 +1202,14 @@ class BulletsNumbersToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.T
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (globalSlimmerRegistry.h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
-      globalSlimmerRegistry.h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
-      globalSlimmerRegistry.h("div", { slot: "popover" }, this.renderContent())));
+    return (index.h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+      index.h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      index.h("div", { slot: "popover" }, this.renderContent())));
   }
   renderContent() {
-    return (globalSlimmerRegistry.h("vega-flex", { gap: "size-8", "justify-content": "center" },
-      globalSlimmerRegistry.h("div", null, this.bulletsToolbarButtonSlimmer.render()),
-      globalSlimmerRegistry.h("div", null, this.numbersToolbarButtonSlimmer.render())));
+    return (index.h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      index.h("div", null, this.bulletsToolbarButtonSlimmer.render()),
+      index.h("div", null, this.numbersToolbarButtonSlimmer.render())));
   }
   isSelected() {
     return false;
@@ -1240,7 +1241,7 @@ __decorate$j([
 /**
  * Action to toggle block horizontal alignment annotation
  */
-class HorizontalAlignmentAnnotationAction extends textNode.AnnotationAction {
+class HorizontalAlignmentAnnotationAction extends contentState.AnnotationAction {
   constructor(textAlign) {
     super();
     this.isFlushable = true;
@@ -1266,7 +1267,7 @@ var __decorate$i = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class LeftAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-left',
@@ -1280,7 +1281,7 @@ class LeftAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolba
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'left';
+        return ((_a = block.getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'left';
       }));
   }
   onClick() {
@@ -1312,7 +1313,7 @@ var __decorate$h = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class CenterAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-center',
@@ -1326,7 +1327,7 @@ class CenterAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Tool
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'center';
+        return ((_a = block.getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'center';
       }));
   }
   onClick() {
@@ -1358,7 +1359,7 @@ var __decorate$g = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class RightAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-right',
@@ -1372,7 +1373,7 @@ class RightAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'right';
+        return ((_a = block.getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'right';
       }));
   }
   onClick() {
@@ -1404,7 +1405,7 @@ var __decorate$f = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class JustifyAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-justify',
@@ -1418,7 +1419,7 @@ class JustifyAlignToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Too
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'justify';
+        return ((_a = block.getAnnotationByType(nodeAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'justify';
       }));
   }
   onClick() {
@@ -1446,7 +1447,7 @@ var __decorate$e = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-class HorizontalAlignmentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButtonSlimmer {
+class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-left',
@@ -1477,16 +1478,16 @@ class HorizontalAlignmentToolbarButtonSlimmer extends textColorToolbarButtonSlim
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (globalSlimmerRegistry.h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
-      globalSlimmerRegistry.h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
-      globalSlimmerRegistry.h("div", { slot: "popover" }, this.renderContent())));
+    return (index.h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
+      index.h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      index.h("div", { slot: "popover" }, this.renderContent())));
   }
   renderContent() {
-    return (globalSlimmerRegistry.h("vega-flex", { gap: "size-8", "justify-content": "center" },
-      globalSlimmerRegistry.h("div", null, this.leftAlignToolbarButtonSlimmer.render()),
-      globalSlimmerRegistry.h("div", null, this.centerAlignToolbarButtonSlimmer.render()),
-      globalSlimmerRegistry.h("div", null, this.rightAlignToolbarButtonSlimmer.render()),
-      globalSlimmerRegistry.h("div", null, this.justifiedToolbarButtonSlimmer.render())));
+    return (index.h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      index.h("div", null, this.leftAlignToolbarButtonSlimmer.render()),
+      index.h("div", null, this.centerAlignToolbarButtonSlimmer.render()),
+      index.h("div", null, this.rightAlignToolbarButtonSlimmer.render()),
+      index.h("div", null, this.justifiedToolbarButtonSlimmer.render())));
   }
   isSelected() {
     return false;
@@ -1768,7 +1769,7 @@ class RTERange {
     this._endOffset = endOffset;
     const startNode = options.startNode;
     const endNode = options.endNode;
-    if (startNode instanceof node_abstract.RTENode) {
+    if (startNode instanceof nodeAnnotation_abstract.RTENode) {
       this._startNode = startNode;
       this._endNode = endNode;
       const startContainer = this.getElementByRTENode(this._startNode);
@@ -1824,7 +1825,7 @@ class RTERange {
    */
   getElementByRTENode(node) {
     if (node) {
-      const element = node_abstract.stateEntityRenderingRegistry.getDOMByEntity(node);
+      const element = nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(node);
       if (element) {
         return node instanceof contentState.RTEImageNode
           ? ui.findParent(element, 'vega-rich-text-image-editor')
@@ -1845,7 +1846,7 @@ class RTERange {
         : element.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
           ? element.querySelector('img')
           : element;
-      return node_abstract.stateEntityRenderingRegistry.getEntityByDOM(registerElement);
+      return nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(registerElement);
     }
   }
 }
@@ -1893,7 +1894,7 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
    * Component lifecycle - [disconnectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
    */
   disconnectedCallback() {
-    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+    changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
   /**
    * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
@@ -1995,12 +1996,12 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
       const startNode = this.selectedNodes[0];
       const endNode = this.selectedNodes.length > 1 ? this.selectedNodes[this.selectedNodes.length - 1] : startNode;
       if (startNode === endNode && startNode.text.length === 0) {
-        this.enqueueSelectionRangeFutureState(startNode, textNode.ZERO_WIDTH_SPACE.length);
+        this.enqueueSelectionRangeFutureState(startNode, contentState.ZERO_WIDTH_SPACE.length);
       }
       else {
         const { startContainer, endContainer, startOffset, endOffset } = this.currentRange;
-        if (node_abstract.stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
-          node_abstract.stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement) {
+        if (nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+          nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement) {
           this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
         }
         else {
@@ -2042,8 +2043,8 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
       }
       if (node.nodeType === Node.TEXT_NODE) {
         const currentNode = node.parentElement;
-        const nodeEntity = node_abstract.stateEntityRenderingRegistry.getEntityByDOM(currentNode);
-        if (nodeEntity instanceof node_abstract.RTENode) {
+        const nodeEntity = nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(currentNode);
+        if (nodeEntity instanceof nodeAnnotation_abstract.RTENode) {
           selectedNodes.push(nodeEntity);
           return;
         }
@@ -2052,8 +2053,8 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
         const entityElement = node.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
           ? node.querySelector('img')
           : node;
-        const nodeEntity = node_abstract.stateEntityRenderingRegistry.getEntityByDOM(entityElement);
-        if (nodeEntity instanceof node_abstract.RTENode) {
+        const nodeEntity = nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(entityElement);
+        if (nodeEntity instanceof nodeAnnotation_abstract.RTENode) {
           selectedNodes.push(nodeEntity);
           return;
         }
@@ -2076,7 +2077,7 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
    */
   clearSelectionMap() {
     this.getSelectedNodes().forEach((node) => {
-      node.annotationMap.delete(node_abstract.InternalAnnotationTypeEnum.SELECTION_RANGE);
+      node.annotationMap.delete(nodeAnnotation_abstract.InternalAnnotationTypeEnum.SELECTION_RANGE);
     });
     this.selectionMap = new Map();
   }
@@ -2092,10 +2093,10 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
    * Register the selection range change observer
    */
   registerSelectionRangeChangeObserver() {
-    this.selectionRangeChangeObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
+    this.selectionRangeChangeObserver = new domNodeSubjectFactory.Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
       this.selectedNodes.push(payload.node);
     });
-    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
 }
 SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
@@ -2147,20 +2148,31 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
     const flushChangesWithDebounce = timer.debounce(() => {
       void this.valueController.flushChanges(this.value);
     }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
-    this.flushChangeObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
-    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+    this.flushChangeObserver = new domNodeSubjectFactory.Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
   /**
    * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
    */
   disconnectedCallback() {
-    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+    changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
+      this.value = contentState.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 contentState.VegaRTEContent)) {
+      this.value = contentState.VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
       this.value = contentState.VegaRTEContent.createEmptyContent();
     }
     else {
@@ -2178,7 +2190,7 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async flushChanges(newValue) {
     this.value = newValue.clone();
-    await textNode.waitForComponentDidRender(this.host);
+    await contentState.waitForComponentDidRender(this.host);
   }
   /**
    * Determines whether the observer should accept changes.
@@ -2208,6 +2220,9 @@ __decorate$c([
 __decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
 __decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
@@ -2225,7 +2240,7 @@ class DarkModeStateControllerSlimmer extends globalSlimmerRegistry.VegaSlimmer {
    * Register an observer to watch for dark mode updates, which will cause the component to update.
    */
   connectedCallback() {
-    this.observer = new domNodeSubjectObserverFactory.Observer(this.isAcceptObserver.bind(this), (isDark) => {
+    this.observer = new domNodeSubjectFactory.Observer(this.isAcceptObserver.bind(this), (isDark) => {
       this.isInDarkMode = isDark;
     });
     changeManager.ChangeManager.register(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
@@ -2276,10 +2291,10 @@ class RichTextContentController {
  *
  * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
  */
-class ReplaceSelectedTextAction extends node_abstract.ModifyContentAction {
+class ReplaceSelectedTextAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(text, currentRange) {
     super();
-    this.type = node_abstract.ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.REPLACE_SELECTED_TEXT;
     this.textToBeInsert = '';
     this.textToBeInsert = text;
     this.currentRange = currentRange;
@@ -2312,8 +2327,8 @@ class BaseHandler {
     const { startContainer, endContainer } = range;
     const result = this.removeSelectionRange();
     const startNode = selectedNodes[0];
-    if (startNode instanceof textNode.RTETextNode && text) {
-      startNode.apply(new textNode.UpdateTextAction(startNode.text + text));
+    if (startNode instanceof contentState.RTETextNode && text) {
+      startNode.apply(new contentState.UpdateTextAction(startNode.text + text));
     }
     this.mergeRangeStartAndEnd(startContainer, endContainer);
     return result;
@@ -2344,10 +2359,10 @@ class BaseHandler {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof textNode.RTETextNode) {
+    if (selectedNodes[0] instanceof contentState.RTETextNode) {
       selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
     }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof textNode.RTETextNode) {
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof contentState.RTETextNode) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -2366,7 +2381,7 @@ class BaseHandler {
         if (startRTENode && startRTENode.parentBlock && endRTENode && endRTENode.parentBlock) {
           const endBlock = endRTENode.parentBlock;
           if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
-            startRTENode.apply(new textNode.UpdateTextAction(startRTENode.text + endRTENode.text));
+            startRTENode.apply(new contentState.UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parentBlock === endRTENode.parentBlock) {
               startRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode));
             }
@@ -2441,8 +2456,8 @@ class BaseHandler {
    */
   createEmptyParagraph() {
     const paragraph = new contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
-    const textNode$1 = new textNode.RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new contentState.AppendChildNodesAction([textNode$1]));
+    const textNode = new contentState.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new contentState.AppendChildNodesAction([textNode]));
     return paragraph;
   }
   /**
@@ -2474,10 +2489,10 @@ class BaseHandler {
  *
  * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
  */
-class InsertNodesBeforeAction extends node_abstract.ModifyContentAction {
+class InsertNodesBeforeAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(referNode, ...nodesToBeInserted) {
     super();
-    this.type = node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.INSERT_NODES_BEFORE;
     this.referNode = referNode;
     this.nodesToBeInserted = nodesToBeInserted;
   }
@@ -2500,7 +2515,7 @@ class InsertTextHandler extends BaseHandler {
         const cursorNode = this.insertTextToRoot(text);
         this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
       }
-      else if (selectedNodes[0] instanceof textNode.RTETextNode) {
+      else if (selectedNodes[0] instanceof contentState.RTETextNode) {
         let nextOffset = startOffset + text.length;
         let updateFlag = false;
         let cursorNode = selectedNodes[0];
@@ -2509,13 +2524,13 @@ class InsertTextHandler extends BaseHandler {
           updateFlag = true;
         }
         else {
-          if (startContainer.nodeValue === textNode.ZERO_WIDTH_SPACE &&
-            startOffset === textNode.ZERO_WIDTH_SPACE.length &&
+          if (startContainer.nodeValue === contentState.ZERO_WIDTH_SPACE &&
+            startOffset === contentState.ZERO_WIDTH_SPACE.length &&
             cursorNode.isEmpty()) {
             startContainer.nodeValue = '';
-            nextOffset = nextOffset - textNode.ZERO_WIDTH_SPACE.length;
+            nextOffset = nextOffset - contentState.ZERO_WIDTH_SPACE.length;
           }
-          if (cursorNode instanceof textNode.RTETextNode) {
+          if (cursorNode instanceof contentState.RTETextNode) {
             updateFlag = true;
             cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
           }
@@ -2527,7 +2542,7 @@ class InsertTextHandler extends BaseHandler {
     else {
       // The selected nodes is multiple nodes
       const cursorNode = this.replaceSelectedNodesWithText(text);
-      this.selectionController.enqueueSelectionRangeFutureState(cursorNode, cursorNode instanceof textNode.RTETextNode
+      this.selectionController.enqueueSelectionRangeFutureState(cursorNode, cursorNode instanceof contentState.RTETextNode
         ? Math.min(startOffset + text.length, cursorNode.text.length)
         : startOffset);
     }
@@ -2543,7 +2558,7 @@ class InsertTextHandler extends BaseHandler {
       this.currentState.blocks[0] &&
       this.currentState.blocks[0] instanceof contentState.RTETextBlock) {
       const firstNode = this.currentState.blocks[0].nodes[0];
-      firstNode.apply(new textNode.UpdateTextAction(text));
+      firstNode.apply(new contentState.UpdateTextAction(text));
       return firstNode;
     }
   }
@@ -2564,7 +2579,7 @@ class InsertTextHandler extends BaseHandler {
       return newTextNode;
     }
     else {
-      lineBreakNode.apply(new textNode.UpdateTextAction(text));
+      lineBreakNode.apply(new contentState.UpdateTextAction(text));
       return lineBreakNode;
     }
   }
@@ -2577,10 +2592,10 @@ class InsertTextHandler extends BaseHandler {
  *
  * @example currentBlock.apply(new BreakSingleBlockAction(startContainerNode, startOffset))
  */
-class BreakSingleBlockAction extends node_abstract.ModifyContentAction {
+class BreakSingleBlockAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(startContainerNode, startOffset) {
     super();
-    this.type = node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK;
     this.startContainerNode = startContainerNode;
     this.startOffset = startOffset;
   }
@@ -2678,10 +2693,10 @@ class InsertParagraphHandler extends BaseHandler {
  *
  * @example block.apply(new SplitBlockWithNodeAction(node, offset))
  */
-class LineBreakSingleBlockAction extends node_abstract.ModifyContentAction {
+class LineBreakSingleBlockAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(startContainerNode, startOffset) {
     super();
-    this.type = node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
     this.startContainerNode = startContainerNode;
     this.startOffset = startOffset;
   }
@@ -2692,10 +2707,10 @@ class LineBreakSingleBlockAction extends node_abstract.ModifyContentAction {
  *
  * @example block.apply(new SplitBlockWithNodeAction(node, offset))
  */
-class lineBreakMultipleBlocksAction extends node_abstract.ModifyContentAction {
+class lineBreakMultipleBlocksAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(selectedBlocks) {
     super();
-    this.type = node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
     this.selectedBlocks = selectedBlocks;
   }
 }
@@ -2790,7 +2805,7 @@ class InsertLineBreakHandler extends BaseHandler {
    * @returns {RTETextNode} the new line break node.
    */
   createLineBreakNode(block) {
-    return new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
+    return new contentState.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
   }
 }
 
@@ -2799,10 +2814,10 @@ class InsertLineBreakHandler extends BaseHandler {
  *
  * @example currentBlock.apply(new DeleteBlockContentAction(startContainerNode, startOffset))
  */
-class DeleteBlockContentAction extends node_abstract.ModifyContentAction {
+class DeleteBlockContentAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(startContainerNode, startOffset) {
     super();
-    this.type = node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT;
     this.startContainerNode = startContainerNode;
     this.startOffset = startOffset;
   }
@@ -2868,7 +2883,7 @@ class DeleteContentHandler extends BaseHandler {
     const cursorNode = this.replaceSelectedNodesWithText('');
     const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
     if (selectedNodes.length > 1 &&
-      lastSelectedNode instanceof textNode.RTETextNode &&
+      lastSelectedNode instanceof contentState.RTETextNode &&
       lastSelectedNode.isEmpty()) {
       lastSelectedNode.parentBlock.apply(new contentState.RemoveChildAction(lastSelectedNode));
     }
@@ -3104,13 +3119,13 @@ class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
     const color = element.style.color;
     const hexColor = (_a = ui.rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
     if (hexColor) {
-      const colorSchema = textNode.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      const colorSchema = contentState.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
       if (colorSchema)
         return colorSchema.key;
       return null;
     }
     else {
-      for (const color of textNode.RTE_TEXT_COLORS) {
+      for (const color of contentState.RTE_TEXT_COLORS) {
         if (element.style.color.includes(color.key)) {
           return color.key;
         }
@@ -3660,12 +3675,60 @@ class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   }
 }
 
+/** Transform child element of UL element which are not LI element to list item block DTO */
+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 contentState.RTEListItemBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.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;
+  }
+}
+
 /** Element to DTO processor */
 class ElementToDtoStrategyProcessor {
   constructor() {
     this.elementStrategies = [
       new UlToRTEListBlockStrategy(),
       new OlToRTEListBlockStrategy(),
+      new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),
@@ -3880,7 +3943,7 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
         records.forEach((record) => {
           const { target } = record;
           if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
-            const richTextNode = node_abstract.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
+            const richTextNode = nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
             if (richTextNode && richTextNode['text'] !== target.textContent) {
               updateFlag = true;
               richTextNode['text'] = target.textContent;
@@ -4006,7 +4069,7 @@ __decorate$a([
 ], UserInputController.prototype, "reConnectObserver", null);
 
 /**
- * A rule that checks if input range is empty or not
+ * A rule that checks if the input range is empty or not
  *
  * @implements {FormFieldValidationRule<string[]>}
  */
@@ -4018,11 +4081,12 @@ class RichTextEditorRequiredRule {
    * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
    */
   evaluate(input) {
-    var _a;
+    var _a, _b;
     if (!this.isAcceptedInputType(input)) {
       throw new Error(`Invalid value ${input} for rich text editor`);
     }
-    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 0 && input.blocks.some((block) => block.isNotEmpty());
+    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 1 || // isValid: true when the length is greater than 1 to keep the same behavior as vega-textarea
+      (((_b = input === null || input === void 0 ? void 0 : input.blocks) === null || _b === void 0 ? void 0 : _b.length) === 1 && input.blocks.some((block) => block.isNotEmpty()));
     return {
       isValid,
       message: isValid ? '' : 'This field is required',
@@ -4067,11 +4131,11 @@ class RichTextEditorRequiredRule {
  *
  * @example block.apply(new InsertImageToBlockAction(node, offset, imageNode))
  */
-class InsertImageToBlockAction extends node_abstract.ModifyContentAction {
+class InsertImageToBlockAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(splitPointNode, startOffsetOfNode, imageBlockToBeInserted) {
     super();
     this.isFlushable = true;
-    this.type = node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK;
     this.splitPointNode = splitPointNode;
     this.startOffsetOfNode = startOffsetOfNode;
     this.imageBlockToBeInserted = imageBlockToBeInserted;
@@ -4096,7 +4160,7 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const imageBlock = new contentState.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
     const newImageNode = new contentState.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
-    newImageNode.apply(new contentState.ImageAnnotationAction('md', ''));
+    newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
     imageBlock.apply(new contentState.AppendChildNodesAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.blocks.length < 1) {
       this.value.apply(new contentState.AppendChildNodesAction([imageBlock]));
@@ -4139,7 +4203,7 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
       domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(richTextContentRef, vegaInternalEventId.VegaInternalRichTextImageClick, (payload) => {
         const range = this.selectionController.getCurrentRange();
         if (!range || range.startContainer !== payload.host || range.startOffset !== 0) {
-          const imageNode = node_abstract.stateEntityRenderingRegistry.getEntityByDOM(payload.host.querySelector('img'));
+          const imageNode = nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(payload.host.querySelector('img'));
           this.selectionController.enqueueSelectionRangeFutureState(imageNode, 0, imageNode, 0, true);
         }
       });
@@ -4204,7 +4268,7 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {RTEContentBlock} lastBlock - The last block of the content
      */
     this.doFocusOnLastTextNode = async (lastBlock) => {
-      this.setCaretRangeToNodeEnd(node_abstract.stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      this.setCaretRangeToNodeEnd(nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
       await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
     };
   }
@@ -4270,8 +4334,8 @@ class TextNodeColorController extends globalSlimmerRegistry.VegaSlimmer {
    * Register an observer to watch for dark mode updates, which will update the color of text node .
    */
   connectedCallback() {
-    this.observer = new domNodeSubjectObserverFactory.Observer(this.isAcceptObserver.bind(this), (isDark) => {
-      const textNodeElements = textNode.TextNodeRenderingRegistry.getTextNodeElements();
+    this.observer = new domNodeSubjectFactory.Observer(this.isAcceptObserver.bind(this), (isDark) => {
+      const textNodeElements = imageAnnotationAction.TextNodeRenderingRegistry.getTextNodeElements();
       textNodeElements.forEach((textColorAnnotation, element) => {
         element.style.color = isDark
           ? textColorAnnotation.textColor.dark
@@ -4316,11 +4380,11 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaRichTextEditor = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaChange = globalSlimmerRegistry.createEvent(this, "vegaChange", 7);
-    this.change = globalSlimmerRegistry.createEvent(this, "change", 7);
-    this.vegaImageInserted = globalSlimmerRegistry.createEvent(this, "vegaImageInserted", 7);
-    this.imageInserted = globalSlimmerRegistry.createEvent(this, "imageInserted", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaImageInserted = index.createEvent(this, "vegaImageInserted", 7);
+    this.imageInserted = index.createEvent(this, "imageInserted", 7);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
@@ -4336,7 +4400,7 @@ const VegaRichTextEditor = class {
       inputContainerGetter: () => this.vegaRichTextEditorRenderer.getRichTextContainerRef(),
       touchableAreaGetter: () => [this.vegaRichTextEditorRenderer.getRichTextContentRef()],
     });
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectObserverFactory.VegaChange);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectFactory.VegaChange);
     this.vegaRichTextEditorRenderer = new VegaRichTextEditorRenderer();
     this.valueController = new ValueController();
     this.selectionController = new SelectionController();
@@ -4347,7 +4411,7 @@ const VegaRichTextEditor = class {
     this.boldToolbarButtonSlimmer = new BoldToolbarButtonSlimmer();
     this.italicToolbarButtonSlimmer = new ItalicToolbarButtonSlimmer();
     this.underlineToolbarButtonSlimmer = new UnderlineToolbarButtonSlimmer();
-    this.textColorToolbarButtonSlimmer = new textColorToolbarButtonSlimmer.TextColorToolbarButtonSlimmer();
+    this.textColorToolbarButtonSlimmer = new imageAnnotationAction.TextColorToolbarButtonSlimmer();
     this.textStylesToolbarButtonSlimmer = new TextStylesToolbarButtonSlimmer();
     this.codeToolbarButtonSlimmer = new CodeToolbarButtonSlimmer();
     this.strikethroughToolbarButtonSlimmer = new StrikethroughToolbarButtonSlimmer();
@@ -4362,12 +4426,12 @@ const VegaRichTextEditor = class {
     this.richTextContentController = new RichTextContentController(this);
     this.userInputController = new UserInputController();
     this.insertImageController = new InsertImageController();
-    this.imageInsertedEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectObserverFactory.VegaImageInserted);
-    this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
+    this.imageInsertedEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectFactory.VegaImageInserted);
+    this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
     this.textNodeColorController = new TextNodeColorController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
-    this.isInDarkMode = node_abstract.VegaThemeManager.isDarkMode();
+    this.isInDarkMode = nodeAnnotation_abstract.VegaThemeManager.isDarkMode();
     /**
      * Specifies the label for the rich text editor.
      *
@@ -4413,7 +4477,9 @@ const VegaRichTextEditor = class {
      */
     this.rows = 4;
     /**
-     * Specifies the value of the rich text editor
+     * Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.
+     * It is recommended to use the VegaRTEContent type.
+     * Only in exceptional cases should the original data in the VegaRTEContentBlock type be used.
      *
      * @vegaVersion 2.34.0
      */
@@ -4472,7 +4538,7 @@ const VegaRichTextEditor = class {
   render() {
     return component.sanitizeVegaComponent(this.vegaRichTextEditorRenderer.render(), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "richTextContentEditable": ["watchRichTextContentEditable"],
     "placeholder": ["watchPlaceholder"],
@@ -4598,15 +4664,15 @@ class VegaRichTextEditorToolbarButtonRenderer extends globalSlimmerRegistry.Vega
     };
   }
   render() {
-    return (globalSlimmerRegistry.h("button", { part: "rich-text-editor-toolbar-button", class: {
+    return (index.h("button", { part: "rich-text-editor-toolbar-button", class: {
         'rich-text-editor-toolbar-btn': true,
         'rich-text-editor-toolbar-button-disabled': this.disabled,
         'rich-text-editor-toolbar-button-selected': this.selected,
       }, onClick: this.handleClick, disabled: this.disabled },
-      globalSlimmerRegistry.h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
-        globalSlimmerRegistry.h("vega-icon", { size: "size-16", color: this.iconColor, icon: internalIconManager.VegaInternalIconManager.getIconKey(this.icon) }),
-        this.showArrowIcon && (globalSlimmerRegistry.h("vega-icon", { size: "size-8", color: "text-secondary", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down') }))),
-      globalSlimmerRegistry.h("slot", null)));
+      index.h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
+        index.h("vega-icon", { size: "size-16", color: this.iconColor, icon: internalIconManager.VegaInternalIconManager.getIconKey(this.icon) }),
+        this.showArrowIcon && (index.h("vega-icon", { size: "size-8", color: "text-secondary", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down') }))),
+      index.h("slot", null)));
   }
 }
 (() => {
@@ -4647,13 +4713,13 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaRichTextEditorToolbarButton = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaClick = globalSlimmerRegistry.createEvent(this, "vegaClick", 7);
-    this.click = globalSlimmerRegistry.createEvent(this, "click", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditorToolbarButton, domNodeSubjectObserverFactory.VegaClick);
-    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaClick], () => this.host, {
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditorToolbarButton, domNodeSubjectFactory.VegaClick);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaClick], () => this.host, {
       useCapture: true,
       customPreventHandle: (e) => {
         if (this.disabled) {
@@ -4694,9 +4760,9 @@ const VegaRichTextEditorToolbarButton = class {
     this.iconColor = 'text-primary';
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate$4([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -4734,24 +4800,24 @@ class VegaRichTextImageEditorRenderer extends globalSlimmerRegistry.VegaSlimmer
     };
   }
   render() {
-    return (globalSlimmerRegistry.h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (index.h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
         this.popoverRef = ref;
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverShow, () => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaPopoverShow, () => {
           this.selected = true;
           this.notifyImageSelected();
           void this.formRef.setValue({
             alt: this.alt,
           });
         });
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverHide, () => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaPopoverHide, () => {
           this.currentPage = 1;
           this.selected = false;
           void this.formRef.reset();
         });
       } },
-      globalSlimmerRegistry.h("div", { slot: "popover-content" },
-        globalSlimmerRegistry.h("slot", null)),
-      globalSlimmerRegistry.h("div", { slot: "popover" },
+      index.h("div", { slot: "popover-content" },
+        index.h("slot", null)),
+      index.h("div", { slot: "popover" },
         this.renderImageEditor(),
         this.renderAltTextEditor())));
   }
@@ -4759,15 +4825,15 @@ class VegaRichTextImageEditorRenderer extends globalSlimmerRegistry.VegaSlimmer
     this.parentContainerRef = ui.findParent(this.host, 'vega-rich-text-content');
   }
   renderImageEditor() {
-    return (globalSlimmerRegistry.h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
-      globalSlimmerRegistry.h("vega-flex", { gap: "size-12", alignItems: "center" },
-        globalSlimmerRegistry.h("vega-font", { variant: "font-field-label-sm", color: "text-primary" }, "Size:"),
-        globalSlimmerRegistry.h("vega-segment-control", { size: "small", segments: [
+    return (index.h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
+      index.h("vega-flex", { gap: "size-12", alignItems: "center" },
+        index.h("vega-font", { variant: "font-field-label-sm", color: "text-primary" }, "Size:"),
+        index.h("vega-segment-control", { size: "small", segments: [
             { key: 'sm', text: 'Sm' },
             { key: 'md', text: 'Md' },
             { key: 'lg', text: 'Lg' },
           ], selected: this.size, ref: (ref) => {
-            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, (e) => {
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, (e) => {
               const size = e.detail;
               this.size = size;
               this.changeEventEmitter.emit({
@@ -4776,8 +4842,8 @@ class VegaRichTextImageEditorRenderer extends globalSlimmerRegistry.VegaSlimmer
               });
             });
           } }),
-        globalSlimmerRegistry.h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
-            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, (payload) => {
+        index.h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaClick, (payload) => {
               if (payload.detail === 'Alt Text') {
                 this.currentPage = 2;
               }
@@ -4788,19 +4854,19 @@ class VegaRichTextImageEditorRenderer extends globalSlimmerRegistry.VegaSlimmer
               }
             });
           } },
-          globalSlimmerRegistry.h("vega-button-group-item", { label: "Alt Text", itemKey: "Alt Text" }),
-          globalSlimmerRegistry.h("vega-button-group-item", { label: "Delete Image", icon: internalIconManager.VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
+          index.h("vega-button-group-item", { label: "Alt Text", itemKey: "Alt Text" }),
+          index.h("vega-button-group-item", { label: "Delete Image", icon: internalIconManager.VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
   }
   renderAltTextEditor() {
-    return (globalSlimmerRegistry.h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
-      globalSlimmerRegistry.h("vega-form", { ref: (ref) => (this.formRef = ref) },
-        globalSlimmerRegistry.h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: "Alt Text", ref: (ref) => {
+    return (index.h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
+      index.h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        index.h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: "Alt Text", ref: (ref) => {
             void ref.doFocus();
           }, onKeyDown: this.handleKeyDown }))));
   }
   notifyImageSelected() {
     if (this.parentContainerRef) {
-      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.parentContainerRef, vegaInternalEventId.VegaInternalRichTextImageClick), { host: this.host });
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.parentContainerRef, vegaInternalEventId.VegaInternalRichTextImageClick), { host: this.host });
     }
   }
   /*
@@ -4810,7 +4876,7 @@ class VegaRichTextImageEditorRenderer extends globalSlimmerRegistry.VegaSlimmer
   /* istanbul ignore next */
   notifyImageDeleteButtonClicked() {
     if (this.parentContainerRef) {
-      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.parentContainerRef, vegaInternalEventId.VegaInternalRichTextImageDeleteButtonClicked), { host: this.host });
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.parentContainerRef, vegaInternalEventId.VegaInternalRichTextImageDeleteButtonClicked), { host: this.host });
     }
   }
 }
@@ -4853,13 +4919,13 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaRichTextImageEditor = 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.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextImageEditorRenderer();
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextImageEditor, domNodeSubjectObserverFactory.VegaChange);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextImageEditor, domNodeSubjectFactory.VegaChange);
     this.currentPage = 1;
     this.selected = false;
     /**
@@ -4876,9 +4942,9 @@ const VegaRichTextImageEditor = class {
     this.size = 'md';
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: { 'rte-image-selected': this.selected } }, this.renderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: { 'rte-image-selected': this.selected } }, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate$2([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -4927,7 +4993,7 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * Component lifecycle - [componentDidRender]{@link VegaRichTextLinkEditor.componentDidRender}
    */
   componentDidRender() {
-    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalComponentDidRender), {});
+    changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalComponentDidRender), {});
   }
   watchStatusChange() {
     if (this.status === 'linkEdit') {
@@ -4943,9 +5009,9 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.popoverRef;
   }
   render() {
-    return (globalSlimmerRegistry.h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (index.h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
         this.popoverRef = ref;
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverShow, () => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaPopoverShow, () => {
           var _a, _b;
           if (this.status === 'linkEdit') {
             void this.urlInputRef.doFocus();
@@ -4955,23 +5021,23 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
             url: (_b = this.record) === null || _b === void 0 ? void 0 : _b.url,
           });
         });
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverHide, () => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaPopoverHide, () => {
           void this.formRef.reset();
           if (this.resetStatusAfterHide) {
             this.status = 'editOrUnlinkSelection';
           }
         });
       } },
-      globalSlimmerRegistry.h("span", { slot: "popover-content" },
-        globalSlimmerRegistry.h("slot", null)),
-      globalSlimmerRegistry.h("div", { slot: "popover" },
+      index.h("span", { slot: "popover-content" },
+        index.h("slot", null)),
+      index.h("div", { slot: "popover" },
         this.renderLinkUnlinkContent(),
         this.renderLinkEditContent())));
   }
   renderLinkUnlinkContent() {
-    return (globalSlimmerRegistry.h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
-      globalSlimmerRegistry.h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectObserverFactory.VegaClick, ({ detail }) => {
+    return (index.h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
+      index.h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectFactory.VegaClick, ({ detail }) => {
             switch (detail) {
               case 'edit': {
                 this.status = 'linkEdit';
@@ -4984,20 +5050,20 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
             }
           });
         } },
-        globalSlimmerRegistry.h("vega-button-group-item", { label: "Edit", itemKey: "edit" }),
-        globalSlimmerRegistry.h("vega-button-group-item", { label: "Unlink", itemKey: "unlink" }))));
+        index.h("vega-button-group-item", { label: "Edit", itemKey: "edit" }),
+        index.h("vega-button-group-item", { label: "Unlink", itemKey: "unlink" }))));
   }
   renderLinkEditContent() {
-    return (globalSlimmerRegistry.h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
-      globalSlimmerRegistry.h("vega-form", { ref: (ref) => (this.formRef = ref) },
-        globalSlimmerRegistry.h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
-          globalSlimmerRegistry.h("vega-input", { "data-vega-form": "url", ref: (ref) => {
+    return (index.h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
+      index.h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        index.h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+          index.h("vega-input", { "data-vega-form": "url", ref: (ref) => {
               this.urlInputRef = ref;
             }, size: "small", label: "URL", onKeyDown: this.handleKeyDown }),
-          globalSlimmerRegistry.h("vega-input", { size: "small", label: "Text", "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+          index.h("vega-input", { size: "small", label: "Text", "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
   }
   updatePopoverTarget() {
-    remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.VegaInternalPopoverUpdateTarget), this.target);
+    remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.VegaInternalPopoverUpdateTarget), this.target);
   }
 }
 __decorate$1([
@@ -5045,13 +5111,13 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaRichTextLinkEditor = 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.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextLinkEditorRenderer();
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextLinkEditor, domNodeSubjectObserverFactory.VegaChange);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextLinkEditor, domNodeSubjectFactory.VegaChange);
     /**
      * Specifies the status of the link editor
      *
@@ -5079,9 +5145,9 @@ const VegaRichTextLinkEditor = class {
     await this.renderer.getPopoverRef().show();
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "status": ["watchStatusChange"],
     "target": ["watchTargetChange"]