@heartlandone/vega 2.35.0-RTE-preview → 2.36.0

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

@@ -9,21 +9,20 @@ const component = require('./component-73a88c4e.js');
 const accessibility = require('./accessibility-bfa227f6.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 imageAnnotationAction = require('./image-annotation-action-d3e1699c.js');
+const vegaInternalEventId = require('./vega-internal-event-id-b12071ea.js');
+const imageAnnotationAction = require('./image-annotation-action-4135ca69.js');
 const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
-const listBlock = require('./list-block-91116257.js');
-const nodeAnnotation_abstract = require('./node-annotation.abstract-e5d3a859.js');
+const contentState = require('./content-state-2336e368.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-c3c07af5.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-7ef32059.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-8d4d2723.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-c2e08e06.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-994eb848.js');
 const timer = require('./timer-5f33058b.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const ui = require('./ui-5fd9b267.js');
 const staticSubjectTitle = require('./static-subject-title-d66b88fb.js');
-const contentState = require('./content-state-3e4467a3.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./vega-skeleton-loader-controller-7dac484f.js');
 require('./feature-flag-controller-7b22e598.js');
@@ -292,13 +291,13 @@ class BoldToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
     const bold = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode)
-      .forEach((node) => node.apply(new listBlock.BoldAnnotationAction(!bold)));
+      .filter((node) => node instanceof contentState.RTETextNode)
+      .forEach((node) => node.apply(new contentState.BoldAnnotationAction(!bold)));
   }
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
   }
@@ -325,7 +324,7 @@ const italic = {
 /**
  * Action to toggle the italic annotation
  */
-class ItalicAnnotationAction extends listBlock.TextSplittableAction {
+class ItalicAnnotationAction extends contentState.TextSplittableAction {
   constructor(italic) {
     super();
     this.isFlushable = true;
@@ -337,7 +336,7 @@ class ItalicAnnotationAction extends listBlock.TextSplittableAction {
    * @returns {ItalicAnnotation} The annotation
    */
   toAnnotation() {
-    return new listBlock.ItalicAnnotation(this.italic);
+    return new contentState.ItalicAnnotation(this.italic);
   }
 }
 
@@ -357,7 +356,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
   }
@@ -365,7 +364,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
     const italic = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new ItalicAnnotationAction(!italic)));
   }
   isDisabled() {
@@ -391,7 +390,7 @@ const underline = {
 /**
  * Action to toggle the underline annotation
  */
-class UnderlineAnnotationAction extends listBlock.TextSplittableAction {
+class UnderlineAnnotationAction extends contentState.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -403,7 +402,7 @@ class UnderlineAnnotationAction extends listBlock.TextSplittableAction {
    * @returns {UnderlineAnnotation} the annotation
    */
   toAnnotation() {
-    return new listBlock.UnderlineAnnotation(this.underline);
+    return new contentState.UnderlineAnnotation(this.underline);
   }
 }
 
@@ -423,7 +422,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => {
         var _a;
@@ -434,7 +433,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new UnderlineAnnotationAction(!selected)));
   }
   isDisabled() {
@@ -474,19 +473,19 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
       const boldByDefault = TextStylesToolbarButtonSlimmer.items.find((item) => item.key === selectedType).bold;
       const selectedTextBlocks = this.selectionController
         .getSelectedBlocks()
-        .filter((block) => block instanceof listBlock.RTETextBlock);
+        .filter((block) => block instanceof contentState.RTETextBlock);
       if (selectedTextBlocks.length > 0) {
         selectedTextBlocks.forEach((item) => {
-          item.apply(new listBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
+          item.apply(new contentState.TextStyleAnnotationAction(selectedType, boldByDefault));
         });
       }
       else {
         void this.focusController.focusOnLastTextNode({ newLine: true }).then(() => {
           this.selectionController
             .getSelectedBlocks()
-            .filter((node) => node instanceof listBlock.RTETextBlock)
+            .filter((node) => node instanceof contentState.RTETextBlock)
             .forEach((item) => {
-            item.apply(new listBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
+            item.apply(new contentState.TextStyleAnnotationAction(selectedType, boldByDefault));
           });
         });
       }
@@ -501,8 +500,8 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   }
   renderDropdownContent() {
     return (index.h(index.Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
-      const textStyleAnnotation = new listBlock.TextStyleAnnotation(item.key);
-      const boldAnnotation = new listBlock.BoldAnnotation(item.bold);
+      const textStyleAnnotation = new contentState.TextStyleAnnotation(item.key);
+      const boldAnnotation = new contentState.BoldAnnotation(item.bold);
       return (index.h("vega-dropdown-item", { key: item.key, itemKey: item.key },
         index.h("vega-box", { padding: { right: 'size-20' } },
           index.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, item.label))));
@@ -521,7 +520,7 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   getSelectedSourceKey() {
     const currentSelectedBlocks = this.selectionController
       .getSelectedBlocks()
-      .filter((block) => block instanceof listBlock.RTETextBlock);
+      .filter((block) => block instanceof contentState.RTETextBlock);
     const isSameType = currentSelectedBlocks.length > 0 &&
       currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
     if (isSameType) {
@@ -598,9 +597,9 @@ class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   onClick() {
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => {
-      node.apply(new listBlock.ClearFormattingAnnotationAction());
+      node.apply(new contentState.ClearFormattingAnnotationAction());
     });
   }
   isDisabled() {
@@ -638,14 +637,14 @@ class CodeToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode)
-      .forEach((node) => node.apply(new listBlock.CodeAnnotationAction(!selected)));
+      .filter((node) => node instanceof contentState.RTETextNode)
+      .forEach((node) => node.apply(new contentState.CodeAnnotationAction(!selected)));
   }
   isSelected() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedNodes.length > 0 &&
       selectedNodes
-        .filter((node) => node instanceof listBlock.RTETextNode)
+        .filter((node) => node instanceof contentState.RTETextNode)
         .map((node) => node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE))
         .every((annotation) => annotation && annotation.code));
   }
@@ -669,7 +668,7 @@ const strikethrough = {
 /**
  * Action to toggle the strikethrough annotation
  */
-class StrikethroughAnnotationAction extends listBlock.TextSplittableAction {
+class StrikethroughAnnotationAction extends contentState.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -681,7 +680,7 @@ class StrikethroughAnnotationAction extends listBlock.TextSplittableAction {
    * @returns {StrikethroughAnnotation} the annotation
    */
   toAnnotation() {
-    return new listBlock.StrikethroughAnnotation(this.strikethrough);
+    return new contentState.StrikethroughAnnotation(this.strikethrough);
   }
 }
 
@@ -701,7 +700,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode);
+      .filter((node) => node instanceof contentState.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => {
         var _a;
@@ -712,7 +711,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof listBlock.RTETextNode)
+      .filter((node) => node instanceof contentState.RTETextNode)
       .forEach((node) => node.apply(new StrikethroughAnnotationAction(!selected)));
   }
   isDisabled() {
@@ -738,7 +737,7 @@ const link = {
 /**
  * Action to change the selection range
  */
-class SelectionChangeAction extends listBlock.AnnotationAction {
+class SelectionChangeAction extends contentState.AnnotationAction {
   constructor(range) {
     super();
     this.isFlushable = false;
@@ -750,7 +749,7 @@ class SelectionChangeAction extends listBlock.AnnotationAction {
    * @returns {SelectionRangeAnnotation} The annotation
    */
   toAnnotation() {
-    return new listBlock.SelectionRangeAnnotation(this.range);
+    return new contentState.SelectionRangeAnnotation(this.range);
   }
 }
 
@@ -775,7 +774,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
           const textChanged = text !== this.currentSelectedText;
           const groupKey = createPublicApiRuntimeMetricsSlimmer.generateUUID();
           this.currentSelectedNodes.forEach((node) => {
-            node.apply(new SelectionChangeAction(this.currentRange)).apply(new listBlock.LinkAnnotationAction({
+            node.apply(new SelectionChangeAction(this.currentRange)).apply(new contentState.LinkAnnotationAction({
               link: { href: url, groupKey: groupKey },
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
@@ -805,7 +804,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
     return (selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return !(node instanceof listBlock.RTETextNode) ||
+        return !(node instanceof contentState.RTETextNode) ||
           node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK) ||
           ((_a = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));
@@ -826,7 +825,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
     // Element appender will control the show and hide logic except for the first time.
     if (!this.linkEditorRef.target) {
       this.linkEditorRef.target = this.linkBtnWrapperRef;
-      void listBlock.waitForComponentDidRender(this.linkEditorRef).then(() => {
+      void contentState.waitForComponentDidRender(this.linkEditorRef).then(() => {
         void this.linkEditorRef.show();
       });
     }
@@ -846,7 +845,7 @@ const indent = {
 /**
  * Action to toggle block indent annotation
  */
-class IndentAnnotationAction extends listBlock.AnnotationAction {
+class IndentAnnotationAction extends contentState.AnnotationAction {
   constructor(indent) {
     super();
     this.isFlushable = true;
@@ -858,7 +857,7 @@ class IndentAnnotationAction extends listBlock.AnnotationAction {
    * @returns {IndentAnnotation} The annotation
    */
   toAnnotation() {
-    return new listBlock.IndentAnnotation(this.indent);
+    return new contentState.IndentAnnotation(this.indent);
   }
 }
 
@@ -884,7 +883,7 @@ class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedBlocks.some((node) => node.type === 'list-item') ||
-      selectedNodes.some((node) => node instanceof listBlock.RTEImageNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
@@ -927,7 +926,7 @@ class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedBlocks.some((node) => node.type === 'list-item') ||
-      selectedNodes.some((node) => node instanceof listBlock.RTEImageNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
@@ -1079,11 +1078,11 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof listBlock.RTEImageNode);
+    return selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
-      selectedBlocks.every((block) => block instanceof listBlock.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1142,11 +1141,11 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof listBlock.RTEImageNode);
+    return selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
-      selectedBlocks.every((block) => block instanceof listBlock.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1217,7 +1216,7 @@ class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBu
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof listBlock.RTEImageNode);
+    return selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
   }
 }
 (() => {
@@ -1242,7 +1241,7 @@ __decorate$j([
 /**
  * Action to toggle block horizontal alignment annotation
  */
-class HorizontalAlignmentAnnotationAction extends listBlock.AnnotationAction {
+class HorizontalAlignmentAnnotationAction extends contentState.AnnotationAction {
   constructor(textAlign) {
     super();
     this.isFlushable = true;
@@ -1254,7 +1253,7 @@ class HorizontalAlignmentAnnotationAction extends listBlock.AnnotationAction {
    * @returns {HorizontalAlignmentAnnotation} The annotation
    */
   toAnnotation() {
-    return new listBlock.HorizontalAlignmentAnnotation(this.textAlign);
+    return new contentState.HorizontalAlignmentAnnotation(this.textAlign);
   }
 }
 
@@ -1828,7 +1827,7 @@ class RTERange {
     if (node) {
       const element = nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(node);
       if (element) {
-        return node instanceof listBlock.RTEImageNode
+        return node instanceof contentState.RTEImageNode
           ? ui.findParent(element, 'vega-rich-text-image-editor')
           : element.firstChild;
       }
@@ -1997,7 +1996,7 @@ 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, listBlock.ZERO_WIDTH_SPACE.length);
+        this.enqueueSelectionRangeFutureState(startNode, contentState.ZERO_WIDTH_SPACE.length);
       }
       else {
         const { startContainer, endContainer, startOffset, endOffset } = this.currentRange;
@@ -2158,11 +2157,22 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
   disconnectedCallback() {
     changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
+      this.value = contentState.VegaRTEContent.fromJSON(this.value);
+    }
+  }
   /**
    * Watches the value of the editor and updates the internal value.
    */
   watchValueUpdate() {
-    if (!this.value || this.value.blocks.length === 0) {
+    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
+      this.value = contentState.VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
       this.value = contentState.VegaRTEContent.createEmptyContent();
     }
     else {
@@ -2180,7 +2190,7 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async flushChanges(newValue) {
     this.value = newValue.clone();
-    await listBlock.waitForComponentDidRender(this.host);
+    await contentState.waitForComponentDidRender(this.host);
   }
   /**
    * Determines whether the observer should accept changes.
@@ -2210,6 +2220,9 @@ __decorate$c([
 __decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
 __decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
@@ -2314,8 +2327,8 @@ class BaseHandler {
     const { startContainer, endContainer } = range;
     const result = this.removeSelectionRange();
     const startNode = selectedNodes[0];
-    if (startNode instanceof listBlock.RTETextNode && text) {
-      startNode.apply(new listBlock.UpdateTextAction(startNode.text + text));
+    if (startNode instanceof contentState.RTETextNode && text) {
+      startNode.apply(new contentState.UpdateTextAction(startNode.text + text));
     }
     this.mergeRangeStartAndEnd(startContainer, endContainer);
     return result;
@@ -2346,10 +2359,10 @@ class BaseHandler {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof listBlock.RTETextNode) {
+    if (selectedNodes[0] instanceof contentState.RTETextNode) {
       selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
     }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof listBlock.RTETextNode) {
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof contentState.RTETextNode) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -2368,20 +2381,20 @@ class BaseHandler {
         if (startRTENode && startRTENode.parentBlock && endRTENode && endRTENode.parentBlock) {
           const endBlock = endRTENode.parentBlock;
           if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
-            startRTENode.apply(new listBlock.UpdateTextAction(startRTENode.text + endRTENode.text));
+            startRTENode.apply(new contentState.UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parentBlock === endRTENode.parentBlock) {
-              startRTENode.parentBlock.apply(new listBlock.RemoveChildAction(endRTENode));
+              startRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode));
             }
             else {
-              endRTENode.parentBlock.apply(new listBlock.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
+              endRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
           if (startRTENode.parentBlock !== endRTENode.parentBlock) {
-            startRTENode.parentBlock.apply(new listBlock.AppendChildNodesAction(endBlock.nodes));
+            startRTENode.parentBlock.apply(new contentState.AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
           if (endBlock.nodes.length < 1) {
-            endBlock.parent.apply(new listBlock.RemoveChildAction(endBlock));
+            endBlock.parent.apply(new contentState.RemoveChildAction(endBlock));
           }
         }
       }
@@ -2410,7 +2423,7 @@ class BaseHandler {
         }
       });
       shouldRemovedItems.forEach((item) => {
-        item.parentBlock.apply(new listBlock.RemoveChildAction(item));
+        item.parentBlock.apply(new contentState.RemoveChildAction(item));
       });
     }
     this.removeRangeStartAndEndSelectedText();
@@ -2418,19 +2431,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 listBlock.RTEImageNode &&
+    if (startNode instanceof contentState.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 listBlock.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
-        startNode.parentBlock.apply(new listBlock.RemoveChildAction(startNode));
+        startNode.parentBlock.parent.apply(new contentState.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+        startNode.parentBlock.apply(new contentState.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 listBlock.RemoveChildAction(startNode));
+        startNode.parentBlock.apply(new contentState.RemoveChildAction(startNode));
         return startNode.parentBlock.nodes[0];
       }
     }
@@ -2442,9 +2455,9 @@ class BaseHandler {
    * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
    */
   createEmptyParagraph() {
-    const paragraph = new listBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
-    const textNode = new listBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new listBlock.AppendChildNodesAction([textNode]));
+    const paragraph = new contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const textNode = new contentState.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new contentState.AppendChildNodesAction([textNode]));
     return paragraph;
   }
   /**
@@ -2502,7 +2515,7 @@ class InsertTextHandler extends BaseHandler {
         const cursorNode = this.insertTextToRoot(text);
         this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
       }
-      else if (selectedNodes[0] instanceof listBlock.RTETextNode) {
+      else if (selectedNodes[0] instanceof contentState.RTETextNode) {
         let nextOffset = startOffset + text.length;
         let updateFlag = false;
         let cursorNode = selectedNodes[0];
@@ -2511,13 +2524,13 @@ class InsertTextHandler extends BaseHandler {
           updateFlag = true;
         }
         else {
-          if (startContainer.nodeValue === listBlock.ZERO_WIDTH_SPACE &&
-            startOffset === listBlock.ZERO_WIDTH_SPACE.length &&
+          if (startContainer.nodeValue === contentState.ZERO_WIDTH_SPACE &&
+            startOffset === contentState.ZERO_WIDTH_SPACE.length &&
             cursorNode.isEmpty()) {
             startContainer.nodeValue = '';
-            nextOffset = nextOffset - listBlock.ZERO_WIDTH_SPACE.length;
+            nextOffset = nextOffset - contentState.ZERO_WIDTH_SPACE.length;
           }
-          if (cursorNode instanceof listBlock.RTETextNode) {
+          if (cursorNode instanceof contentState.RTETextNode) {
             updateFlag = true;
             cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
           }
@@ -2529,7 +2542,7 @@ class InsertTextHandler extends BaseHandler {
     else {
       // The selected nodes is multiple nodes
       const cursorNode = this.replaceSelectedNodesWithText(text);
-      this.selectionController.enqueueSelectionRangeFutureState(cursorNode, cursorNode instanceof listBlock.RTETextNode
+      this.selectionController.enqueueSelectionRangeFutureState(cursorNode, cursorNode instanceof contentState.RTETextNode
         ? Math.min(startOffset + text.length, cursorNode.text.length)
         : startOffset);
     }
@@ -2543,9 +2556,9 @@ class InsertTextHandler extends BaseHandler {
   insertTextToRoot(text) {
     if (this.currentState &&
       this.currentState.blocks[0] &&
-      this.currentState.blocks[0] instanceof listBlock.RTETextBlock) {
+      this.currentState.blocks[0] instanceof contentState.RTETextBlock) {
       const firstNode = this.currentState.blocks[0].nodes[0];
-      firstNode.apply(new listBlock.UpdateTextAction(text));
+      firstNode.apply(new contentState.UpdateTextAction(text));
       return firstNode;
     }
   }
@@ -2566,7 +2579,7 @@ class InsertTextHandler extends BaseHandler {
       return newTextNode;
     }
     else {
-      lineBreakNode.apply(new listBlock.UpdateTextAction(text));
+      lineBreakNode.apply(new contentState.UpdateTextAction(text));
       return lineBreakNode;
     }
   }
@@ -2641,8 +2654,8 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new listBlock.MergeTwoBlocksNodesAction(lastBlock));
-        const splitAction = new listBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
+        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
+        const splitAction = new contentState.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
         firstBlock.apply(splitAction);
         this.switchCaretPositionToNextElement(splitAction.newBlock);
         return;
@@ -2728,10 +2741,10 @@ class InsertLineBreakHandler extends BaseHandler {
    * </p>
    */
   breakNewBlock() {
-    const newBlock = new listBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const newBlock = new contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
     const lineBreakNode = this.createLineBreakNode(newBlock);
-    newBlock.apply(new listBlock.AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
-    this.currentState.apply(new listBlock.AppendChildNodesAction([newBlock]));
+    newBlock.apply(new contentState.AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
+    this.currentState.apply(new contentState.AppendChildNodesAction([newBlock]));
     this.switchCaretPositionToSpecifiedNode(lineBreakNode);
   }
   /**
@@ -2792,7 +2805,7 @@ class InsertLineBreakHandler extends BaseHandler {
    * @returns {RTETextNode} the new line break node.
    */
   createLineBreakNode(block) {
-    return new listBlock.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
+    return new contentState.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
   }
 }
 
@@ -2858,7 +2871,7 @@ class DeleteContentHandler extends BaseHandler {
    */
   insertDefaultParagraph() {
     const paragraph = this.createEmptyParagraph();
-    this.currentState.apply(new listBlock.AppendChildNodesAction([paragraph]));
+    this.currentState.apply(new contentState.AppendChildNodesAction([paragraph]));
     this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
   }
   /**
@@ -2870,9 +2883,9 @@ class DeleteContentHandler extends BaseHandler {
     const cursorNode = this.replaceSelectedNodesWithText('');
     const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
     if (selectedNodes.length > 1 &&
-      lastSelectedNode instanceof listBlock.RTETextNode &&
+      lastSelectedNode instanceof contentState.RTETextNode &&
       lastSelectedNode.isEmpty()) {
-      lastSelectedNode.parentBlock.apply(new listBlock.RemoveChildAction(lastSelectedNode));
+      lastSelectedNode.parentBlock.apply(new contentState.RemoveChildAction(lastSelectedNode));
     }
     this.convertFirstBlockToParagraph(cursorNode.parentBlock);
     this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
@@ -2885,14 +2898,14 @@ class DeleteContentHandler extends BaseHandler {
   convertFirstBlockToParagraph(block) {
     const firstBlock = this.currentState.blocks[0];
     if (firstBlock === block &&
-      block instanceof listBlock.RTETextBlock &&
+      block instanceof contentState.RTETextBlock &&
       block.nodes.length === 1 &&
       block.nodes[0].isEmpty() &&
       block.type !== 'paragraph') {
       const paragraph = this.createEmptyParagraph();
-      paragraph.apply(new listBlock.ReplaceChildNodesAction(block.nodes));
-      block.parent.apply(new listBlock.InsertBlocksBeforeAction(block, paragraph));
-      block.parent.apply(new listBlock.RemoveChildAction(block));
+      paragraph.apply(new contentState.ReplaceChildNodesAction(block.nodes));
+      block.parent.apply(new contentState.InsertBlocksBeforeAction(block, paragraph));
+      block.parent.apply(new contentState.RemoveChildAction(block));
     }
   }
   /**
@@ -3106,13 +3119,13 @@ class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
     const color = element.style.color;
     const hexColor = (_a = ui.rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
     if (hexColor) {
-      const colorSchema = listBlock.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      const colorSchema = contentState.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
       if (colorSchema)
         return colorSchema.key;
       return null;
     }
     else {
-      for (const color of listBlock.RTE_TEXT_COLORS) {
+      for (const color of contentState.RTE_TEXT_COLORS) {
         if (element.style.color.includes(color.key)) {
           return color.key;
         }
@@ -3239,7 +3252,7 @@ class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstra
     const nodes = this.generateChildNodes(elementsArray);
     if (nodes.length === 0)
       return null;
-    return listBlock.RTETextBlock.from({
+    return contentState.RTETextBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'paragraph',
       nodes: nodes,
@@ -3294,7 +3307,7 @@ class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   handle(elementsArray) {
     if (elementsArray[0].childNodes.length === 0)
       return null;
-    return listBlock.RTEListBlock.from({
+    return contentState.RTEListBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'bullet-list',
       blocks: [],
@@ -3342,7 +3355,7 @@ class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   handle(elementsArray) {
     if (elementsArray[0].childNodes.length === 0)
       return null;
-    return listBlock.RTEListItemBlock.from({
+    return contentState.RTEListItemBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'list-item',
       nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName))),
@@ -3392,7 +3405,7 @@ class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract
     const nodes = this.generateChildNodes(elementsArray);
     if (nodes.length === 0)
       return null;
-    return listBlock.RTETextBlock.from({
+    return contentState.RTETextBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: this.getElementType(elementsArray[0]),
       nodes: nodes,
@@ -3469,7 +3482,7 @@ class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    */
   handle(elementsArray) {
     const element = elementsArray[0];
-    return listBlock.RTEImageBlock.from({
+    return contentState.RTEImageBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'image',
       nodes: [
@@ -3523,7 +3536,7 @@ class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   handle(elementsArray) {
     const element = elementsArray[0];
     const image = element.querySelector('img');
-    return listBlock.RTEImageBlock.from({
+    return contentState.RTEImageBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'image',
       nodes: [
@@ -3577,7 +3590,7 @@ class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   handle(elementsArray) {
     if (elementsArray[0].childNodes.length === 0)
       return null;
-    return listBlock.RTEListBlock.from({
+    return contentState.RTEListBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'number-list',
       blocks: [],
@@ -3629,7 +3642,7 @@ class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    */
   handle(elementsArray) {
     const element = elementsArray[0].querySelector('img');
-    return listBlock.RTEImageBlock.from({
+    return contentState.RTEImageBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'image',
       nodes: [
@@ -3662,12 +3675,60 @@ class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   }
 }
 
+/** Transform child element of UL element which are not LI element to list item block DTO */
+class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return contentState.RTEListItemBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
 /** Element to DTO processor */
 class ElementToDtoStrategyProcessor {
   constructor() {
     this.elementStrategies = [
       new UlToRTEListBlockStrategy(),
       new OlToRTEListBlockStrategy(),
+      new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),
@@ -3756,7 +3817,7 @@ class InsertPasteHandler extends BaseHandler {
    * @param { RTEContentBlock[]} blocks - blocks
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new listBlock.AppendChildNodesAction(blocks));
+    this.currentState.apply(new contentState.AppendChildNodesAction(blocks));
   }
   /**
    * Insert the blocks to content
@@ -3768,9 +3829,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 listBlock.SplitBlockWithNodeAction(cursorNode, startOffset);
+      const breakAction = new contentState.SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new listBlock.InsertBlocksAfterAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new contentState.InsertBlocksAfterAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
   }
@@ -3783,7 +3844,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 listBlock.InsertBlocksBeforeAction(currentBlock, ...blocks));
+    currentBlock.parent.apply(new contentState.InsertBlocksBeforeAction(currentBlock, ...blocks));
     this.switchCaretPositionToNextElement(currentBlock);
   }
   /**
@@ -4008,7 +4069,7 @@ __decorate$a([
 ], UserInputController.prototype, "reConnectObserver", null);
 
 /**
- * A rule that checks if input range is empty or not
+ * A rule that checks if the input range is empty or not
  *
  * @implements {FormFieldValidationRule<string[]>}
  */
@@ -4020,11 +4081,12 @@ class RichTextEditorRequiredRule {
    * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
    */
   evaluate(input) {
-    var _a;
+    var _a, _b;
     if (!this.isAcceptedInputType(input)) {
       throw new Error(`Invalid value ${input} for rich text editor`);
     }
-    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 0 && input.blocks.some((block) => block.isNotEmpty());
+    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 1 || // isValid: true when the length is greater than 1 to keep the same behavior as vega-textarea
+      (((_b = input === null || input === void 0 ? void 0 : input.blocks) === null || _b === void 0 ? void 0 : _b.length) === 1 && input.blocks.some((block) => block.isNotEmpty()));
     return {
       isValid,
       message: isValid ? '' : 'This field is required',
@@ -4096,12 +4158,12 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
    */
   insertImageToCaretPosition(imageUrl) {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const imageBlock = new listBlock.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    const newImageNode = new listBlock.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
+    const imageBlock = new contentState.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    const newImageNode = new contentState.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
-    imageBlock.apply(new listBlock.AppendChildNodesAction([newImageNode]));
+    imageBlock.apply(new contentState.AppendChildNodesAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.blocks.length < 1) {
-      this.value.apply(new listBlock.AppendChildNodesAction([imageBlock]));
+      this.value.apply(new contentState.AppendChildNodesAction([imageBlock]));
       void this.valueController.flushChanges(this.value);
     }
     else {
@@ -4219,13 +4281,13 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async focusOnLastTextNode(options) {
     const lastBlock = this.value.blocks[this.value.blocks.length - 1];
-    if (!(lastBlock instanceof listBlock.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
-      const newTextBlock = listBlock.RTETextBlock.from({
+    if (!(lastBlock instanceof contentState.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
+      const newTextBlock = contentState.RTETextBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'paragraph',
         nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
       });
-      lastBlock.parent.apply(new listBlock.InsertBlocksAfterAction(lastBlock, newTextBlock));
+      lastBlock.parent.apply(new contentState.InsertBlocksAfterAction(lastBlock, newTextBlock));
       await this.valueController.flushChanges(this.value);
       await this.doFocusOnLastTextNode(newTextBlock);
     }
@@ -4415,7 +4477,9 @@ const VegaRichTextEditor = class {
      */
     this.rows = 4;
     /**
-     * Specifies the value of the rich text editor
+     * Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.
+     * It is recommended to use the VegaRTEContent type.
+     * Only in exceptional cases should the original data in the VegaRTEContentBlock type be used.
      *
      * @vegaVersion 2.34.0
      */