@heartlandone/vega 2.34.0 → 2.35.0-RTE-preview

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

@@ -2,52 +2,54 @@
 
 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 changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
 const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
-const textColorToolbarButtonSlimmer = require('./text-color-toolbar-button-slimmer-b1c9f40e.js');
-const internalIconManager = require('./internal-icon-manager-2282a62f.js');
-const contentState = require('./content-state-3a2724f6.js');
-const node_abstract = require('./node.abstract-f8075f84.js');
-const textNode = require('./text-node-0d12da5a.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 imageAnnotationAction = require('./image-annotation-action-d3e1699c.js');
+const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
+const listBlock = require('./list-block-91116257.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-e5d3a859.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-7ef32059.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-c2e08e06.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');
+const contentState = require('./content-state-3e4467a3.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 +62,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 +91,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 +128,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 +139,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 +216,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 +279,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 +292,22 @@ class BoldToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarButt
     const bold = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
-      .forEach((node) => node.apply(new contentState.BoldAnnotationAction(!bold)));
+      .filter((node) => node instanceof listBlock.RTETextNode)
+      .forEach((node) => node.apply(new listBlock.BoldAnnotationAction(!bold)));
   }
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof listBlock.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 +325,7 @@ const italic = {
 /**
  * Action to toggle the italic annotation
  */
-class ItalicAnnotationAction extends textNode.TextSplittableAction {
+class ItalicAnnotationAction extends listBlock.TextSplittableAction {
   constructor(italic) {
     super();
     this.isFlushable = true;
@@ -335,7 +337,7 @@ class ItalicAnnotationAction extends textNode.TextSplittableAction {
    * @returns {ItalicAnnotation} The annotation
    */
   toAnnotation() {
-    return new textNode.ItalicAnnotation(this.italic);
+    return new listBlock.ItalicAnnotation(this.italic);
   }
 }
 
@@ -345,7 +347,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 +357,23 @@ class ItalicToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarBu
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof listBlock.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 listBlock.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 +391,7 @@ const underline = {
 /**
  * Action to toggle the underline annotation
  */
-class UnderlineAnnotationAction extends textNode.TextSplittableAction {
+class UnderlineAnnotationAction extends listBlock.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -401,7 +403,7 @@ class UnderlineAnnotationAction extends textNode.TextSplittableAction {
    * @returns {UnderlineAnnotation} the annotation
    */
   toAnnotation() {
-    return new textNode.UnderlineAnnotation(this.underline);
+    return new listBlock.UnderlineAnnotation(this.underline);
   }
 }
 
@@ -411,7 +413,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 +423,26 @@ class UnderlineToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolba
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof listBlock.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 listBlock.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 +463,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',
@@ -472,38 +474,38 @@ class TextStylesToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
       const boldByDefault = TextStylesToolbarButtonSlimmer.items.find((item) => item.key === selectedType).bold;
       const selectedTextBlocks = this.selectionController
         .getSelectedBlocks()
-        .filter((block) => block instanceof contentState.RTETextBlock);
+        .filter((block) => block instanceof listBlock.RTETextBlock);
       if (selectedTextBlocks.length > 0) {
         selectedTextBlocks.forEach((item) => {
-          item.apply(new contentState.TextStyleAnnotationAction(selectedType, boldByDefault));
+          item.apply(new listBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
         });
       }
       else {
         void this.focusController.focusOnLastTextNode({ newLine: true }).then(() => {
           this.selectionController
             .getSelectedBlocks()
-            .filter((node) => node instanceof contentState.RTETextBlock)
+            .filter((node) => node instanceof listBlock.RTETextBlock)
             .forEach((item) => {
-            item.apply(new contentState.TextStyleAnnotationAction(selectedType, boldByDefault));
+            item.apply(new listBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
           });
         });
       }
     };
   }
   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) => {
-      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))));
+    return (index.h(index.Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
+      const textStyleAnnotation = new listBlock.TextStyleAnnotation(item.key);
+      const boldAnnotation = new listBlock.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,19 +513,19 @@ 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
       .getSelectedBlocks()
-      .filter((block) => block instanceof contentState.RTETextBlock);
+      .filter((block) => block instanceof listBlock.RTETextBlock);
     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 +583,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 +598,14 @@ class ClearStyleToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
   onClick() {
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode)
+      .filter((node) => node instanceof listBlock.RTETextNode)
       .forEach((node) => {
-      node.apply(new textNode.ClearFormattingAnnotationAction());
+      node.apply(new listBlock.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 +627,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 +638,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 listBlock.RTETextNode)
+      .forEach((node) => node.apply(new listBlock.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 listBlock.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 +669,7 @@ const strikethrough = {
 /**
  * Action to toggle the strikethrough annotation
  */
-class StrikethroughAnnotationAction extends textNode.TextSplittableAction {
+class StrikethroughAnnotationAction extends listBlock.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -679,7 +681,7 @@ class StrikethroughAnnotationAction extends textNode.TextSplittableAction {
    * @returns {StrikethroughAnnotation} the annotation
    */
   toAnnotation() {
-    return new textNode.StrikethroughAnnotation(this.strikethrough);
+    return new listBlock.StrikethroughAnnotation(this.strikethrough);
   }
 }
 
@@ -689,7 +691,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 +701,26 @@ class StrikethroughToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.To
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof textNode.RTETextNode);
+      .filter((node) => node instanceof listBlock.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 listBlock.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 +738,7 @@ const link = {
 /**
  * Action to change the selection range
  */
-class SelectionChangeAction extends textNode.AnnotationAction {
+class SelectionChangeAction extends listBlock.AnnotationAction {
   constructor(range) {
     super();
     this.isFlushable = false;
@@ -748,7 +750,7 @@ class SelectionChangeAction extends textNode.AnnotationAction {
    * @returns {SelectionRangeAnnotation} The annotation
    */
   toAnnotation() {
-    return new textNode.SelectionRangeAnnotation(this.range);
+    return new listBlock.SelectionRangeAnnotation(this.range);
   }
 }
 
@@ -758,7 +760,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 +775,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 listBlock.LinkAnnotationAction({
               link: { href: url, groupKey: groupKey },
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
@@ -785,13 +787,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 +805,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 listBlock.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 +826,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 listBlock.waitForComponentDidRender(this.linkEditorRef).then(() => {
         void this.linkEditorRef.show();
       });
     }
@@ -844,7 +846,7 @@ const indent = {
 /**
  * Action to toggle block indent annotation
  */
-class IndentAnnotationAction extends textNode.AnnotationAction {
+class IndentAnnotationAction extends listBlock.AnnotationAction {
   constructor(indent) {
     super();
     this.isFlushable = true;
@@ -856,7 +858,7 @@ class IndentAnnotationAction extends textNode.AnnotationAction {
    * @returns {IndentAnnotation} The annotation
    */
   toAnnotation() {
-    return new contentState.IndentAnnotation(this.indent);
+    return new listBlock.IndentAnnotation(this.indent);
   }
 }
 
@@ -866,7 +868,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',
@@ -882,12 +884,12 @@ class MoreIndentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedBlocks.some((node) => node.type === 'list-item') ||
-      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
+      selectedNodes.some((node) => node instanceof listBlock.RTEImageNode));
   }
   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 +911,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',
@@ -925,12 +927,12 @@ class LessIndentToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.Toolb
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedBlocks.some((node) => node.type === 'list-item') ||
-      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
+      selectedNodes.some((node) => node instanceof listBlock.RTEImageNode));
   }
   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 +955,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 +991,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 +1027,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 +1040,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 +1055,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',
@@ -1077,11 +1079,11 @@ class BulletsToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarB
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
+    return selectedNodes.some((node) => node instanceof listBlock.RTEImageNode);
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
-      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof listBlock.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1118,7 +1120,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',
@@ -1140,11 +1142,11 @@ class NumbersToolbarButtonSlimmer extends textColorToolbarButtonSlimmer.ToolbarB
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
+    return selectedNodes.some((node) => node instanceof listBlock.RTEImageNode);
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
-      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof listBlock.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1181,7 +1183,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,21 +1203,21 @@ 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;
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
+    return selectedNodes.some((node) => node instanceof listBlock.RTEImageNode);
   }
 }
 (() => {
@@ -1240,7 +1242,7 @@ __decorate$j([
 /**
  * Action to toggle block horizontal alignment annotation
  */
-class HorizontalAlignmentAnnotationAction extends textNode.AnnotationAction {
+class HorizontalAlignmentAnnotationAction extends listBlock.AnnotationAction {
   constructor(textAlign) {
     super();
     this.isFlushable = true;
@@ -1252,7 +1254,7 @@ class HorizontalAlignmentAnnotationAction extends textNode.AnnotationAction {
    * @returns {HorizontalAlignmentAnnotation} The annotation
    */
   toAnnotation() {
-    return new contentState.HorizontalAlignmentAnnotation(this.textAlign);
+    return new listBlock.HorizontalAlignmentAnnotation(this.textAlign);
   }
 }
 
@@ -1266,7 +1268,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 +1282,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 +1314,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 +1328,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 +1360,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 +1374,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 +1406,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 +1420,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 +1448,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 +1479,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 +1770,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,9 +1826,9 @@ 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
+        return node instanceof listBlock.RTEImageNode
           ? ui.findParent(element, 'vega-rich-text-image-editor')
           : element.firstChild;
       }
@@ -1845,7 +1847,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 +1895,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 +1997,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, listBlock.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 +2044,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 +2054,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 +2078,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 +2094,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,14 +2149,14 @@ 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);
   }
   /**
    * Watches the value of the editor and updates the internal value.
@@ -2178,7 +2180,7 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async flushChanges(newValue) {
     this.value = newValue.clone();
-    await textNode.waitForComponentDidRender(this.host);
+    await listBlock.waitForComponentDidRender(this.host);
   }
   /**
    * Determines whether the observer should accept changes.
@@ -2225,7 +2227,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 +2278,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 +2314,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 listBlock.RTETextNode && text) {
+      startNode.apply(new listBlock.UpdateTextAction(startNode.text + text));
     }
     this.mergeRangeStartAndEnd(startContainer, endContainer);
     return result;
@@ -2344,10 +2346,10 @@ class BaseHandler {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof textNode.RTETextNode) {
+    if (selectedNodes[0] instanceof listBlock.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 listBlock.RTETextNode) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -2366,20 +2368,20 @@ 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 listBlock.UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parentBlock === endRTENode.parentBlock) {
-              startRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode));
+              startRTENode.parentBlock.apply(new listBlock.RemoveChildAction(endRTENode));
             }
             else {
-              endRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
+              endRTENode.parentBlock.apply(new listBlock.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
           if (startRTENode.parentBlock !== endRTENode.parentBlock) {
-            startRTENode.parentBlock.apply(new contentState.AppendChildNodesAction(endBlock.nodes));
+            startRTENode.parentBlock.apply(new listBlock.AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
           if (endBlock.nodes.length < 1) {
-            endBlock.parent.apply(new contentState.RemoveChildAction(endBlock));
+            endBlock.parent.apply(new listBlock.RemoveChildAction(endBlock));
           }
         }
       }
@@ -2408,7 +2410,7 @@ class BaseHandler {
         }
       });
       shouldRemovedItems.forEach((item) => {
-        item.parentBlock.apply(new contentState.RemoveChildAction(item));
+        item.parentBlock.apply(new listBlock.RemoveChildAction(item));
       });
     }
     this.removeRangeStartAndEndSelectedText();
@@ -2416,19 +2418,19 @@ class BaseHandler {
      * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
      * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action
      */
-    if (startNode instanceof contentState.RTEImageNode &&
+    if (startNode instanceof listBlock.RTEImageNode &&
       startOffset !== 1 &&
       (endNode !== startNode || endOffset !== 0)) {
       // the image block will be deleted when the image is the only item
       if (startNode.parentBlock.nodes.length === 1) {
         const paragraph = this.createEmptyParagraph();
-        startNode.parentBlock.parent.apply(new contentState.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
-        startNode.parentBlock.apply(new contentState.RemoveChildAction(startNode));
+        startNode.parentBlock.parent.apply(new listBlock.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+        startNode.parentBlock.apply(new listBlock.RemoveChildAction(startNode));
         return paragraph.nodes[0];
       }
       else if (startNode === startNode.parentBlock.nodes[0]) {
         // the start node should be the next image item if the image is first item
-        startNode.parentBlock.apply(new contentState.RemoveChildAction(startNode));
+        startNode.parentBlock.apply(new listBlock.RemoveChildAction(startNode));
         return startNode.parentBlock.nodes[0];
       }
     }
@@ -2440,9 +2442,9 @@ class BaseHandler {
    * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
    */
   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 paragraph = new listBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const textNode = new listBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new listBlock.AppendChildNodesAction([textNode]));
     return paragraph;
   }
   /**
@@ -2474,10 +2476,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 +2502,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 listBlock.RTETextNode) {
         let nextOffset = startOffset + text.length;
         let updateFlag = false;
         let cursorNode = selectedNodes[0];
@@ -2509,13 +2511,13 @@ class InsertTextHandler extends BaseHandler {
           updateFlag = true;
         }
         else {
-          if (startContainer.nodeValue === textNode.ZERO_WIDTH_SPACE &&
-            startOffset === textNode.ZERO_WIDTH_SPACE.length &&
+          if (startContainer.nodeValue === listBlock.ZERO_WIDTH_SPACE &&
+            startOffset === listBlock.ZERO_WIDTH_SPACE.length &&
             cursorNode.isEmpty()) {
             startContainer.nodeValue = '';
-            nextOffset = nextOffset - textNode.ZERO_WIDTH_SPACE.length;
+            nextOffset = nextOffset - listBlock.ZERO_WIDTH_SPACE.length;
           }
-          if (cursorNode instanceof textNode.RTETextNode) {
+          if (cursorNode instanceof listBlock.RTETextNode) {
             updateFlag = true;
             cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
           }
@@ -2527,7 +2529,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 listBlock.RTETextNode
         ? Math.min(startOffset + text.length, cursorNode.text.length)
         : startOffset);
     }
@@ -2541,9 +2543,9 @@ class InsertTextHandler extends BaseHandler {
   insertTextToRoot(text) {
     if (this.currentState &&
       this.currentState.blocks[0] &&
-      this.currentState.blocks[0] instanceof contentState.RTETextBlock) {
+      this.currentState.blocks[0] instanceof listBlock.RTETextBlock) {
       const firstNode = this.currentState.blocks[0].nodes[0];
-      firstNode.apply(new textNode.UpdateTextAction(text));
+      firstNode.apply(new listBlock.UpdateTextAction(text));
       return firstNode;
     }
   }
@@ -2564,7 +2566,7 @@ class InsertTextHandler extends BaseHandler {
       return newTextNode;
     }
     else {
-      lineBreakNode.apply(new textNode.UpdateTextAction(text));
+      lineBreakNode.apply(new listBlock.UpdateTextAction(text));
       return lineBreakNode;
     }
   }
@@ -2577,10 +2579,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;
   }
@@ -2639,8 +2641,8 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
-        const splitAction = new contentState.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
+        firstBlock.apply(new listBlock.MergeTwoBlocksNodesAction(lastBlock));
+        const splitAction = new listBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
         firstBlock.apply(splitAction);
         this.switchCaretPositionToNextElement(splitAction.newBlock);
         return;
@@ -2678,10 +2680,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 +2694,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;
   }
 }
@@ -2726,10 +2728,10 @@ class InsertLineBreakHandler extends BaseHandler {
    * </p>
    */
   breakNewBlock() {
-    const newBlock = new contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const newBlock = new listBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
     const lineBreakNode = this.createLineBreakNode(newBlock);
-    newBlock.apply(new contentState.AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
-    this.currentState.apply(new contentState.AppendChildNodesAction([newBlock]));
+    newBlock.apply(new listBlock.AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
+    this.currentState.apply(new listBlock.AppendChildNodesAction([newBlock]));
     this.switchCaretPositionToSpecifiedNode(lineBreakNode);
   }
   /**
@@ -2790,7 +2792,7 @@ class InsertLineBreakHandler extends BaseHandler {
    * @returns {RTETextNode} the new line break node.
    */
   createLineBreakNode(block) {
-    return new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
+    return new listBlock.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
   }
 }
 
@@ -2799,10 +2801,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;
   }
@@ -2856,7 +2858,7 @@ class DeleteContentHandler extends BaseHandler {
    */
   insertDefaultParagraph() {
     const paragraph = this.createEmptyParagraph();
-    this.currentState.apply(new contentState.AppendChildNodesAction([paragraph]));
+    this.currentState.apply(new listBlock.AppendChildNodesAction([paragraph]));
     this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
   }
   /**
@@ -2868,9 +2870,9 @@ class DeleteContentHandler extends BaseHandler {
     const cursorNode = this.replaceSelectedNodesWithText('');
     const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
     if (selectedNodes.length > 1 &&
-      lastSelectedNode instanceof textNode.RTETextNode &&
+      lastSelectedNode instanceof listBlock.RTETextNode &&
       lastSelectedNode.isEmpty()) {
-      lastSelectedNode.parentBlock.apply(new contentState.RemoveChildAction(lastSelectedNode));
+      lastSelectedNode.parentBlock.apply(new listBlock.RemoveChildAction(lastSelectedNode));
     }
     this.convertFirstBlockToParagraph(cursorNode.parentBlock);
     this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
@@ -2883,14 +2885,14 @@ class DeleteContentHandler extends BaseHandler {
   convertFirstBlockToParagraph(block) {
     const firstBlock = this.currentState.blocks[0];
     if (firstBlock === block &&
-      block instanceof contentState.RTETextBlock &&
+      block instanceof listBlock.RTETextBlock &&
       block.nodes.length === 1 &&
       block.nodes[0].isEmpty() &&
       block.type !== 'paragraph') {
       const paragraph = this.createEmptyParagraph();
-      paragraph.apply(new contentState.ReplaceChildNodesAction(block.nodes));
-      block.parent.apply(new contentState.InsertBlocksBeforeAction(block, paragraph));
-      block.parent.apply(new contentState.RemoveChildAction(block));
+      paragraph.apply(new listBlock.ReplaceChildNodesAction(block.nodes));
+      block.parent.apply(new listBlock.InsertBlocksBeforeAction(block, paragraph));
+      block.parent.apply(new listBlock.RemoveChildAction(block));
     }
   }
   /**
@@ -2910,446 +2912,530 @@ class DeleteContentHandler extends BaseHandler {
 }
 
 /**
- * Abstract class of element to DTO handler
+ * Abstract class to define strategies for processing HTML elements
  */
-class ElementToDTOHandlerAbstract {
-  /**
-   * At new of handler, We need to inherit the style of the parent element
-   *   and clone an empty element so that the child elements can be appended.
-   *
-   * @param {HTMLElement} element - Current element.
-   */
-  constructor(element) {
-    this.setEntityElementStyle(element);
-    this.setElement(element);
+class ElementToDTOStrategy {
+}
+/**
+ * Class to represent the output of a strategy applied to HTML elements
+ */
+class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
   }
-  /* istanbul ignore next */
-  // eslint-disable-next-line jsdoc/require-returns-check
   /**
-   * Can be handle, the class inherit this class should implement it.
+   * Set children output.
    *
-   * @param {HTMLElement} element - Current element.
-   * @returns {boolean} Can be handle.
+   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
    */
-  static canHandle(element) {
-    throw new Error(`Method not implemented! ${element}`);
+  setChildrenOutput(childrenOutput) {
+    this.childrenOutput = childrenOutput;
   }
   /**
-   * Transform current text block to a DTO.
+   * Transform current output and children output to DTO
    *
-   * @returns {RTETextBlock} Current text block.
-   */
-  static currentTextBlockElementToDTO() {
-    const element = this.getCurrentTextBlockElement();
-    const firstNode = element.firstChild;
-    if (firstNode && firstNode.nodeName === 'SPAN' && firstNode.textContent === '\n') {
-      firstNode.remove();
-    }
-    if (element.childNodes.length > 0) {
-      const block = contentState.RTETextBlock.fromHTML(element, 'paragraph');
-      element.innerHTML = '';
-      return block;
+   * @returns {RTEContentBlock} - DTO.
+   */
+  toDto() {
+    const currentBlock = this.currentStrategy.handle(this.currentElements);
+    if (this.childrenOutput.length > 0 && currentBlock) {
+      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
+        .map((childOutput) => childOutput.toDto())
+        .filter(Boolean));
     }
-    return null;
+    return currentBlock;
   }
+}
+
+/** Abstract class for block html element to RTE block dto */
+class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   /**
-   * Get current text block element.
+   * Generate child nodes of block element, this will inherit all annotations from parent to text node and
+   *   flat the child nodes.
    *
-   * @returns {HTMLDivElement} - Current text block element.
-   */
-  static getCurrentTextBlockElement() {
-    return ElementToDTOHandlerAbstract.currentTextBlockElement;
+   * Example:
+   *   <li>
+   *     <u><i>text1</i></u>
+   *     <span style='font-weight: bold;'><span>text2</span></span>
+   *     text3
+   *   </li>
+   * will tranform to:
+   *   <li>
+   *     <span>text1</span> // with underline and italic annotations
+   *     <span>text2</span> // with bold annotations
+   *     <span>text3</span> // no annotations
+   *   </li>
+   *
+   * @param {HTMLElement[]} elements - Child elements.
+   * @param {HTMLElement[]} annotations - Parent annotations.
+   * @returns {VegaRTETextNode[]} - Text node DTO.
+   */
+  generateChildNodes(elements, annotations = {}) {
+    const childNodes = [];
+    elements.forEach((child) => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (this.isInvalidTextNode(child))
+          return;
+        childNodes.push({
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'text',
+          text: child.textContent,
+          annotations: annotations,
+        });
+      }
+      else {
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child))));
+      }
+    });
+    return childNodes;
   }
   /**
-   * While it a empty block. we should use new line span instead this block.
+   * Generate annotations map for block element.
    *
-   * @param {HTMLElement} blockElement - Current block element.
-   * @returns {boolean} - is handled.
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTEBlockAnnotations} - Text block annotations.
    */
-  handleEmptyBlock(blockElement) {
-    if (this.currentVirtualElement.childNodes.length === 0) {
-      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.createNewLineSpan());
-      return true;
-    }
-    return false;
+  generateBlockAnnotations(element) {
+    const annotations = {};
+    const textAlign = this.getTextAlign(element);
+    const indent = this.getIndent(element);
+    if (textAlign)
+      annotations.textAlign = textAlign;
+    if (indent)
+      annotations.indent = indent;
+    return annotations;
   }
   /**
-   * Inherit style of parent.
+   * Check is a invalid text node.
    *
-   * @param {HTMLElement} element - Current element.
+   * @param {HTMLElement} element - Current node element.
+   * @returns {boolean} - boolean.
    */
-  setEntityElementStyle(element) {
-    if (element.nodeType === Node.TEXT_NODE)
-      return;
-    let currentStyle = element.getAttribute('style') || '';
-    const currentClass = element.classList;
-    const parent = element.parentElement;
-    const parentStyle = parent.getAttribute('style') || '';
-    const parentClass = parent.classList;
-    switch (element.nodeName) {
-      case 'CODE':
-        currentClass.add('v-rte--code');
-        break;
-      case 'STRONG':
-        currentStyle += 'font-weight: bold; ';
-        break;
-      case 'I':
-      case 'EM':
-        currentStyle += 'font-style: italic; ';
-        break;
-      case 'S':
-        currentClass.add('v-rte--strikethrough');
-        break;
-      case 'U':
-        currentClass.add('v-rte--underline');
-        break;
+  isInvalidTextNode(element) {
+    if (element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
     }
-    element.setAttribute('style', parentStyle + currentStyle);
-    element.classList.add(...Array.from(parentClass));
+    return false;
   }
   /**
-   * Set current element.
-   *   while element is a text node, we should wrap it and inherit it style
-   *   otherwise, we should clone it and clear content.
+   * Generate annotations map for text node element.
    *
-   * @param {HTMLElement} element - Current element.
-   */
-  setElement(element) {
-    this.currentEntityElement = element;
-    if (element.nodeType === Node.TEXT_NODE) {
-      const wrapper = document.createElement('span');
-      wrapper.setAttribute('style', element.parentElement.getAttribute('style'));
-      wrapper.setAttribute('class', element.parentElement.getAttribute('class'));
-      wrapper.append(element);
-      this.currentVirtualElement = wrapper;
-    }
-    else {
-      const elementClone = element.cloneNode(true);
-      elementClone.innerHTML = '';
-      this.currentVirtualElement = elementClone;
-    }
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
+   */
+  generateTextNodeAnnotations(element) {
+    if (this.isCode(element))
+      return { code: true };
+    const annotations = {
+      bold: this.isBold(element),
+      italic: this.isItalic(element),
+      underline: this.isUnderline(element),
+      strikethrough: this.isStrikethrough(element),
+    };
+    const color = this.getColor(element);
+    const link = this.getLink(element);
+    if (color)
+      annotations.textColor = color;
+    if (link)
+      annotations.link = link;
+    return annotations;
   }
   /**
-   * Create a new line span.
+   * Is code element.
    *
-   * @returns {HTMLElement} - new line span.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  createNewLineSpan() {
-    const span = document.createElement('span');
-    span.append('\n');
-    return span;
+  isCode(element) {
+    return element.classList.contains('v-rte--code') || element.nodeName === 'CODE';
   }
-}
-ElementToDTOHandlerAbstract.currentTextBlockElement = document.createElement('div');
-
-/**
- * Transform image element to DTO.
- */
-class ImageToDTOHandler extends ElementToDTOHandlerAbstract {
   /**
-   * Can be transform.
+   * Is bold element.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  static canHandle(element) {
-    return (element.nodeType === Node.ELEMENT_NODE &&
-      (element.nodeName === 'IMG' || element.querySelector('vega-rich-text-image-editor') !== null));
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700');
   }
   /**
-   * Special the child elements of current.
+   * Is italic element.
    *
-   * @returns {HTMLElement[]} - child elements.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  childElements() {
-    return [];
+  isItalic(element) {
+    return element.nodeName === 'I' || element.style.fontStyle === 'italic' || element.nodeName === 'EM';
   }
   /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
+   * Is underline element.
    *
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  handle() {
-    return [
-      ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-      contentState.RTEImageBlock.fromHTML(this.currentEntityElement),
-    ];
+  isUnderline(element) {
+    return (element.style.textDecoration.includes('underline') ||
+      element.nodeName === 'U' ||
+      element.classList.contains('v-rte--underline'));
   }
   /**
-   * Get the block element for child nodes
+   * Is strikethrough element.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes('line-through') ||
+      element.nodeName === 'S' ||
+      element.classList.contains('v-rte--strikethrough'));
   }
-}
-
-/**
- * Transform link element to DTO.
- */
-class InlineBlockToDTOHandler extends ElementToDTOHandlerAbstract {
   /**
-   * Can be transform.
+   * Get current color of element.
    *
-   * @returns {boolean} Result.
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
    */
-  static canHandle() {
-    return true;
+  getColor(element) {
+    var _a;
+    const color = element.style.color;
+    const hexColor = (_a = ui.rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      const colorSchema = listBlock.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return colorSchema.key;
+      return null;
+    }
+    else {
+      for (const color of listBlock.RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
+      }
+      return null;
+    }
   }
   /**
-   * Special the child elements of current.
+   * Get current link of element.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTELink>} - link.
+   */
+  getLink(element) {
+    if (element.nodeName === 'A') {
+      return {
+        href: element.href,
+        groupKey: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      };
+    }
+    return null;
   }
   /**
-   * The inline block is a child element, and there is no need to convert it to a dto here
+   * Get text align of current element.
    *
-   * @returns {RTEContentBlock[]} - Empty dto.
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
    */
-  handle() {
-    return [];
+  getTextAlign(element) {
+    const classList = element.classList;
+    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
+      return 'left';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
+      return 'center';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
+      return 'right';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
+      return 'justify';
+    }
+    const style = element.style;
+    switch (style.textAlign) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'right';
+      case 'justify':
+        return 'justify';
+      case 'left':
+        return 'left';
+      default:
+        return null;
+    }
   }
   /**
-   * Get the block element for child nodes
+   * Get indent of current element.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {Nullable<HTMLElement>} - blockElement.
-   */
-  getNextBlockElement(blockElement) {
-    return blockElement;
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<number>} - Indent.
+   */
+  getIndent(element) {
+    const style = element.style;
+    let marginLeft;
+    if (style.marginLeft) {
+      marginLeft = style.marginLeft;
+    }
+    else if (style.margin) {
+      const margins = style.margin.split(' ');
+      switch (margins.length) {
+        case 4:
+          marginLeft = margins[3];
+          break;
+        case 2:
+        case 3:
+          marginLeft = margins[1];
+          break;
+        default:
+          marginLeft = margins[0];
+          break;
+      }
+    }
+    else {
+      return null;
+    }
+    const marginLeftNumber = Number(marginLeft.replace('px', ''));
+    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
   }
 }
 
-/**
- * Transform link element to DTO.
- */
-class LinkToDTOHandler extends ElementToDTOHandlerAbstract {
-  constructor(element) {
-    super(element);
-  }
+/** Transform continue inline block elements to text block DTO */
+class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
-   */
-  static canHandle(element) {
-    return ['A'].includes(element.nodeName);
-  }
-  /**
-   * Special the child elements of current.
-   *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    let count = 0;
+    for (let i = currentIndex; i < elementsArray.length; i++) {
+      const element = elementsArray[i];
+      if (element.nodeType === Node.TEXT_NODE ||
+        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
+          !(element.textContent === '' && element.querySelector('IMG')))) {
+        count++;
+      }
+      else {
+        break;
+      }
+    }
+    return count;
   }
   /**
-   * Format and append element for it block element.
+   * Parse to a text block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
-   */
-  handle(blockElement) {
-    const key = createPublicApiRuntimeMetricsSlimmer.generateUUID();
-    Array.from(this.currentVirtualElement.children).forEach((childElement) => {
-      childElement.setAttribute('data-href', this.currentVirtualElement.href);
-      childElement.setAttribute('data-group-key', key);
-      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(childElement);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const parent = elementsArray[0].parentElement;
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return listBlock.RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: nodes,
+      annotations: this.generateBlockAnnotations(parent),
     });
-    return [];
   }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
   /**
-   * Get the block element for child nodes
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return false;
   }
 }
+ContinueInlineToRTETextBlockStrategy.canHandleTags = [
+  'SPAN',
+  'STRONG',
+  'CODE',
+  'I',
+  'EM',
+  'S',
+  'U',
+  'A',
+  'VEGA-RICH-TEXT-LINK-EDITOR',
+];
 
-/**
- * Transform list element to DTO.
- */
-class ListItemToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform ul element to list block DTO */
+class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return ['LI'].includes(element.nodeName);
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
   }
   /**
-   * Special the child elements of current.
+   * Parse to a block.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return listBlock.RTEListBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'bullet-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
   }
   /**
-   * Append list item node to it block element.
+   * Append child list item blocks to current list block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
    */
-  handle(blockElement) {
-    blockElement.append(this.currentVirtualElement);
-    return [];
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks;
+    childBlocks.forEach((block) => (block.parent = currentBlock));
   }
   /**
-   * Get the block element for child nodes
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return true;
   }
 }
 
-/**
- * Transform list element to DTO.
- */
-class ListToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform li element to list item block DTO */
+class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return ['UL', 'OL'].includes(element.nodeName);
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
   }
   /**
-   * Special the child elements of current.
+   * Parse to a list item block.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return listBlock.RTEListItemBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'list-item',
+      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName))),
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
   }
   /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to append and wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
+   * Append child list blocks to current list item block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {RTEListBlock} currentBlock - Current list item block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
    */
-  handle(blockElement) {
-    if (this.handleEmptyBlock(blockElement)) {
-      return [];
-    }
-    if (blockElement && ListItemToDTOHandler.canHandle(blockElement)) {
-      blockElement.append(this.currentVirtualElement);
-      return [];
-    }
-    else {
-      return [
-        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-        contentState.RTEListBlock.fromHTML(this.currentVirtualElement),
-      ];
-    }
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
   }
   /**
-   * Get the block element for child nodes
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return true;
   }
 }
 
-/**
- * Transform paragraph.
- */
-class ParagraphToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform inline block element to text block DTO */
+class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return ['DIV', 'P'].includes(element.nodeName);
+  canHandle(elementsArray, currentIndex) {
+    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(elementsArray[currentIndex]))
+      ? 1
+      : 0;
   }
   /**
-   * Special the child elements of current.
+   * Parse to a text block.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
-  }
-  /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
-   *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
-   */
-  handle(blockElement) {
-    if (this.handleEmptyBlock(blockElement)) {
-      return [];
-    }
-    if (blockElement && !ParagraphToDTOHandler.canHandle(blockElement)) {
-      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
-      return [];
-    }
-    else {
-      return [
-        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-        contentState.RTETextBlock.fromHTML(this.currentVirtualElement, 'paragraph'),
-      ];
-    }
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return listBlock.RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: this.getElementType(elementsArray[0]),
+      nodes: nodes,
+      annotations: Object.assign(Object.assign({}, this.generateBlockAnnotations(elementsArray[0])), { textStyle: this.getElementType(elementsArray[0]) }),
+    });
   }
+  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
-   *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * Append child blocks.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
-  }
-}
-
-/**
- * Transform text block element to DTO.
- */
-class TextBlockToDTOHandler extends ElementToDTOHandlerAbstract {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
   /**
-   * Can be transform.
+   * Should continue process to child elements.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @returns {boolean} - boolean.
    */
-  static canHandle(element) {
-    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(element));
+  shouldProceedToElementChildren() {
+    return false;
   }
   /**
-   * Get type of element.
+   * Get node type of element.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {string} type.
+   * @param {HTMLElement} element - element.
+   * @returns {string} - node type.
    */
-  static getElementType(element) {
+  getElementType(element) {
+    var _a;
     if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
       return element.getAttribute('data-type');
     }
+    switch ((_a = element.style) === null || _a === void 0 ? void 0 : _a.fontSize) {
+      case '36px':
+        return 'title';
+      case '28px':
+        return 'subtitle';
+      case '22px':
+        return 'heading-1';
+      case '20px':
+        return 'heading-2';
+      case '18px':
+        return 'heading-3';
+    }
     switch (element.nodeName) {
       case 'H1':
         return 'heading-1';
@@ -3361,139 +3447,269 @@ class TextBlockToDTOHandler extends ElementToDTOHandlerAbstract {
         return '';
     }
   }
+}
+
+/** Transform img element to image block DTO */
+class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Special the child elements of current.
+   * Can be handle.
    *
-   * @returns {HTMLElement[]} - child elements.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
   }
   /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
+   * Parse to a image block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
-   */
-  handle(blockElement) {
-    if (this.handleEmptyBlock(blockElement)) {
-      return [];
-    }
-    if (blockElement) {
-      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
-      return [];
-    }
-    else {
-      return [
-        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-        contentState.RTETextBlock.fromHTML(this.currentVirtualElement, TextBlockToDTOHandler.getElementType(this.currentVirtualElement)),
-      ];
-    }
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    return listBlock.RTEImageBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
   }
+  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return false;
   }
 }
 
-/**
- * Transform text element to DTO.
- */
-class TextToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform vega-rich-text-image-editor element to image block DTO */
+class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return element.nodeType === Node.TEXT_NODE;
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const image = element.querySelector('img');
+    return listBlock.RTEImageBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'image',
+          url: image.src,
+          annotations: {
+            size: element.size || 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
   }
   /* istanbul ignore next */
   /**
-   * Special the child elements of current.
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement[]} - child elements.
+   * @returns {boolean} - boolean.
    */
-  childElements() {
-    return [];
+  shouldProceedToElementChildren() {
+    return false;
   }
+}
+
+/** Transform ol element to list block DTO */
+class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Append text node to it block element.
+   * Can be handle.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  handle(blockElement) {
-    (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.currentVirtualElement);
-    return [];
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
   }
-  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
+   * Parse to a number list block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {Nullable<HTMLElement>} - blockElement.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return listBlock.RTEListBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'number-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
    */
-  getNextBlockElement(blockElement) {
-    return blockElement;
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks;
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
   }
 }
 
-/**
- * Element to DTO processor
- */
-class ElementToDTOProcessor {
-  constructor() {
-    this.elementHandlers = [
-      TextToDTOHandler,
-      ImageToDTOHandler,
-      ListToDTOHandler,
-      ListItemToDTOHandler,
-      TextBlockToDTOHandler,
-      ParagraphToDTOHandler,
-      LinkToDTOHandler,
-      InlineBlockToDTOHandler,
-    ];
+/** Transform img in span or other inline element to image block DTO */
+class SpanImageToRTEImageBlockStrategy 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];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
   }
   /**
-   * Transform element to block DTO.
+   * Parse to a image block.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {RTEContentBlock[]} Block DTO.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0].querySelector('img');
+    return listBlock.RTEImageBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
    */
-  process(element) {
-    const blocks = this.transformDomToDto(Array.from(element.childNodes), null);
-    blocks.push(ElementToDTOHandlerAbstract.currentTextBlockElementToDTO());
-    return blocks.filter(Boolean);
+  // 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 LiToRTEListItemBlockStrategy(),
+      new InlineBlockToRTETextBlockStrategy(),
+      new ImgToRTEImageBlockStrategy(),
+      new VegaImageToRTEImageBlockStrategy(),
+      new SpanImageToRTEImageBlockStrategy(),
+      new ContinueInlineToRTETextBlockStrategy(),
+    ];
   }
   /**
-   * Transform elements to block DTO.
+   * Transform process.
    *
-   * @param {HTMLElement[]} elements - An pasted elements.
-   * @param {HTMLElement} blockElement - Current block element.
-   * @returns {RTEContentBlock[]} Block DTO.
-   */
-  transformDomToDto(elements, blockElement) {
-    const rootBlocks = [];
-    elements.forEach((element) => {
-      if (this.isInvalidElement(element))
-        return;
-      const handler = this.elementHandlers.find((elementHandler) => elementHandler.canHandle(element));
-      const handle = new handler(element);
-      if (element.nodeType !== Node.TEXT_NODE) {
-        rootBlocks.push(...this.transformDomToDto(handle.childElements(), handle.getNextBlockElement(blockElement)));
+   * @param {HTMLElement[]} elements - Current elements.
+   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   */
+  process(elements) {
+    const outputs = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (this.isInvalidElement(elements[i]))
+        continue;
+      let canHandledCount = 0;
+      for (const strategy of this.elementStrategies) {
+        canHandledCount = strategy.canHandle(elements, i);
+        if (canHandledCount > 0) {
+          const handledElements = elements.slice(i, i + canHandledCount);
+          const output = new ElementToDTOStrategyOutput(strategy, handledElements);
+          if (canHandledCount === 1 && strategy.shouldProceedToElementChildren()) {
+            output.setChildrenOutput(this.process(Array.from(handledElements[0].childNodes)));
+          }
+          outputs.push(output);
+          i += canHandledCount - 1;
+          break;
+        }
       }
-      rootBlocks.push(...handle.handle(blockElement));
-    });
-    return rootBlocks;
+      if (canHandledCount === 0 && i < elements.length) {
+        const elementChildren = Array.from(elements[i].childNodes);
+        const childrenOutputs = this.process(Array.from(elementChildren));
+        if (childrenOutputs.length > 0) {
+          outputs.push(...childrenOutputs);
+        }
+      }
+    }
+    return outputs;
   }
   /**
    * Checks if the given element is valid to parse.
@@ -3504,11 +3720,6 @@ class ElementToDTOProcessor {
   isInvalidElement(element) {
     if (element.nodeType === Node.COMMENT_NODE)
       return true;
-    if (element.nodeType === Node.TEXT_NODE && element.nodeValue.includes('\t')) {
-      const value = element.nodeValue.replace(/\n|\t/gm, '');
-      if (value.length === 0)
-        return true;
-    }
     return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
   }
 }
@@ -3519,7 +3730,7 @@ class ElementToDTOProcessor {
 class InsertPasteHandler extends BaseHandler {
   constructor() {
     super(...arguments);
-    this.elementToDTOProcessor = new ElementToDTOProcessor();
+    this.elementToDTOProcessor = new ElementToDtoStrategyProcessor();
   }
   /**
    * Update the state value when user paste html elements.
@@ -3545,7 +3756,7 @@ class InsertPasteHandler extends BaseHandler {
    * @param { RTEContentBlock[]} blocks - blocks
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new contentState.AppendChildNodesAction(blocks));
+    this.currentState.apply(new listBlock.AppendChildNodesAction(blocks));
   }
   /**
    * Insert the blocks to content
@@ -3557,9 +3768,9 @@ class InsertPasteHandler extends BaseHandler {
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
     if (currentBlock) {
       const { startOffset } = this.selectionController.getCurrentRange();
-      const breakAction = new contentState.SplitBlockWithNodeAction(cursorNode, startOffset);
+      const breakAction = new listBlock.SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new contentState.InsertBlocksAfterAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new listBlock.InsertBlocksAfterAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
   }
@@ -3572,7 +3783,7 @@ class InsertPasteHandler extends BaseHandler {
     const cursorNode = this.removeSelectionRange();
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
-    currentBlock.parent.apply(new contentState.InsertBlocksBeforeAction(currentBlock, ...blocks));
+    currentBlock.parent.apply(new listBlock.InsertBlocksBeforeAction(currentBlock, ...blocks));
     this.switchCaretPositionToNextElement(currentBlock);
   }
   /**
@@ -3585,7 +3796,11 @@ class InsertPasteHandler extends BaseHandler {
     const pastedHTML = event.dataTransfer.getData('text/html');
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
-    return this.elementToDTOProcessor.process(tempContainer);
+    return this.elementToDTOProcessor
+      .process(Array.from(tempContainer.childNodes))
+      .filter(Boolean)
+      .map((output) => output.toDto())
+      .filter(Boolean);
   }
   /**
    * Moves the caret to the next block element in a rich text editor.
@@ -3667,7 +3882,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;
@@ -3854,11 +4069,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;
@@ -3881,12 +4096,12 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
    */
   insertImageToCaretPosition(imageUrl) {
     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', ''));
-    imageBlock.apply(new contentState.AppendChildNodesAction([newImageNode]));
+    const imageBlock = new listBlock.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    const newImageNode = new listBlock.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
+    newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
+    imageBlock.apply(new listBlock.AppendChildNodesAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.blocks.length < 1) {
-      this.value.apply(new contentState.AppendChildNodesAction([imageBlock]));
+      this.value.apply(new listBlock.AppendChildNodesAction([imageBlock]));
       void this.valueController.flushChanges(this.value);
     }
     else {
@@ -3926,7 +4141,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);
         }
       });
@@ -3991,7 +4206,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();
     };
   }
@@ -4004,13 +4219,13 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async focusOnLastTextNode(options) {
     const lastBlock = this.value.blocks[this.value.blocks.length - 1];
-    if (!(lastBlock instanceof contentState.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
-      const newTextBlock = contentState.RTETextBlock.from({
+    if (!(lastBlock instanceof listBlock.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
+      const newTextBlock = listBlock.RTETextBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'paragraph',
         nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
       });
-      lastBlock.parent.apply(new contentState.InsertBlocksAfterAction(lastBlock, newTextBlock));
+      lastBlock.parent.apply(new listBlock.InsertBlocksAfterAction(lastBlock, newTextBlock));
       await this.valueController.flushChanges(this.value);
       await this.doFocusOnLastTextNode(newTextBlock);
     }
@@ -4057,8 +4272,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
@@ -4103,11 +4318,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({
@@ -4123,7 +4338,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();
@@ -4134,7 +4349,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();
@@ -4149,12 +4364,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.
      *
@@ -4259,7 +4474,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"],
@@ -4385,15 +4600,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)));
   }
 }
 (() => {
@@ -4434,13 +4649,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) {
@@ -4481,9 +4696,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()
@@ -4521,24 +4736,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())));
   }
@@ -4546,15 +4761,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({
@@ -4563,8 +4778,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;
               }
@@ -4575,19 +4790,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 });
     }
   }
   /*
@@ -4597,7 +4812,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 });
     }
   }
 }
@@ -4640,13 +4855,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;
     /**
@@ -4663,9 +4878,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()
@@ -4714,7 +4929,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') {
@@ -4730,9 +4945,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();
@@ -4742,23 +4957,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';
@@ -4771,20 +4986,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([
@@ -4832,13 +5047,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
      *
@@ -4866,9 +5081,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"]