@globalpayments/vega 2.34.1 → 2.36.0

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

@@ -1,26 +1,312 @@
-import { d as MapToComponentField, V as VegaSlimmer, h, H as Host, r as registerInstance, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
-import { d as VegaDarkModeStyleController } from './node.abstract-93746055.js';
-import { T as TextColorToolbarButtonSlimmer } from './text-color-toolbar-button-slimmer-b2270b64.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-0968ce04.js';
-import { f as findParent } from './ui-5600b48f.js';
-import { b as waitForComponentDidRender } from './text-node-a652ca87.js';
+import { h, H as Host, r as registerInstance, g as getElement } from './index-187f71d1.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { s as stateEntityRenderingRegistry, B as BlockAnnotation, N as NodeAnnotation, c as NodeAnnotationTypeEnum, I as InternalAnnotationTypeEnum, e as VegaDarkModeStyleController } from './node-annotation.abstract-af11b11b.js';
+import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-8a12e0bd.js';
+import { Z as ZERO_WIDTH_SPACE, L as LinkAnnotationAction, R as RTETextBlock, I as ImageAnnotation, a as RTEImageBlock, b as RTEListBlock, V as VegaRTEContent, c as waitForComponentDidRender } from './content-state-42a06d75.js';
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { f as VegaChange } from './dom-node-subject-factory-5831cdd4.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-901c7953.js';
+import { f as findParent } from './ui-62e4be97.js';
 import './_commonjsHelpers-9943807e.js';
 import './static-subject-title-e06a3840.js';
-import './change-manager-8f5b72c2.js';
-import './dom-node-subject-observer-factory-80358591.js';
-import './create-public-api-runtime-metrics-slimmer-14cb4599.js';
-import './dynamic-slimmer-85746483.js';
-import './vega-internal-event-id-4af5c6e9.js';
-import './internal-icon-manager-7fc7535a.js';
-import './icon-manager-3cef32e7.js';
-import './type-guard-158f6d7a.js';
+import './change-manager-6a7eb88c.js';
+import './vega-internal-event-id-458939b6.js';
+import './internal-icon-manager-900a5bb4.js';
+import './icon-manager-b889176b.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './accessibility-e5fd0fab.js';
+import './dynamic-slimmer-90b8af32.js';
+
+class RTEBlockRenderer {
+  registerRef(ref, block) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, block);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTEBlock} block - RTE block entity
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles(block) {
+    return Array.from(block.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTEBlock} block - RTE block entity
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses(block) {
+    return Array.from(block.annotationMap.values())
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}
+
+class RTENodeRenderer {
+  registerRef(ref, node) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, node);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTENode} node - The DTO node
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles(node) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTENode} node - The DTO node
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses(node) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(Boolean)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}
+
+class RTETextNodeRenderer extends RTENodeRenderer {
+  render(node) {
+    const codeAnnotation = node.annotationMap.get(NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (h("code", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+    }
+    return (h("span", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+  }
+  registerRef(ref, node) {
+    super.registerRef(ref, node);
+    if (ref) {
+      const textColorAnnotation = node.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        TextNodeRenderingRegistry.register(ref, textColorAnnotation);
+      }
+    }
+  }
+}
+const RTETextNodeRenderer$1 = new RTETextNodeRenderer();
+
+/**
+ * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
+ */
+class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
+  renderNodes(block, renderContext) {
+    const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? this.renderLinkNodes(block.nodes, renderContext)
+      : block.nodes.map((node) => RTETextNodeRenderer$1.render(node));
+  }
+  renderLinkNodes(nodes, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    return blockNodes.flatMap((item) => {
+      if (this.isLinkGroup(item)) {
+        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        return editable
+          ? this.renderLinkEditorWrapper(item, linkAnnotation)
+          : this.renderLink(item, linkAnnotation);
+      }
+      return RTETextNodeRenderer$1.render(item);
+    });
+  }
+  groupNodesByLink(nodes) {
+    return nodes.reduce((acc, node) => {
+      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
+          lastGroup.push(node);
+        }
+        else {
+          acc.push([node]);
+        }
+      }
+      else {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+  isLinkGroup(item) {
+    return Array.isArray(item);
+  }
+  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    const textFromNodes = linkNodes.map((node) => node.text).join('');
+    const handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== textFromNodes;
+          const groupKey = generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && linkNodes.length > 1,
+              doSplit: false,
+            });
+            node.apply(linkAnnotationAction);
+          });
+          return;
+        }
+        case 'unlink': {
+          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
+    let linkWrapperRef;
+    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+        }
+      } },
+      this.renderLink(linkNodes, linkAnnotation),
+      h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => RTETextNodeRenderer$1.render(node))));
+  }
+}
+
+class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
+  canHandle(block) {
+    return block instanceof RTETextBlock;
+  }
+  render(block, renderContext) {
+    const BlockTag = this.getBlockTagByType(block.type);
+    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) }, super.renderNodes(block, renderContext)));
+  }
+  getBlockTagByType(type) {
+    switch (type) {
+      case 'title':
+      case 'subtitle':
+        return `div`;
+      case 'heading-1':
+        return `h1`;
+      case 'heading-2':
+        return `h2`;
+      case 'heading-3':
+        return `h3`;
+      case 'paragraph':
+        return 'p';
+    }
+  }
+}
+const RTETextBlockRenderer$1 = new RTETextBlockRenderer();
+
+class RTEImageNodeRenderer extends RTENodeRenderer {
+  constructor() {
+    super(...arguments);
+    this.handleChange = ({ detail }, node) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          node.apply(new ImageAnnotationAction(size, alt));
+          break;
+        }
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-rich-text-editor-image-click-delete-button}
+         */
+        /* istanbul ignore next */
+        case 'delete': {
+          const event = new InputEvent('beforeinput', {
+            inputType: 'deleteContentBackward',
+            bubbles: true,
+          });
+          setTimeout(() => {
+            stateEntityRenderingRegistry.getDOMByEntity(node).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+  }
+  render(node, renderContext) {
+    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const { size, alt } = imageAnnotation || new ImageAnnotation('md', '');
+    return renderContext.editable ? (h("vega-rich-text-image-editor", { style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => this.handleChange(e, node));
+      } }, this.renderImage(alt, node, renderContext))) : (this.renderImage(alt, node, renderContext));
+  }
+  renderImage(alt, node, renderContext) {
+    return (h("img", { style: renderContext.editable ? { width: '100%' } : super.getStyles(node), alt: alt, src: node.url, ref: (ref) => super.registerRef(ref, node) }));
+  }
+}
+const RTEImageNodeRenderer$1 = new RTEImageNodeRenderer();
+
+class RTEImageBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEImageBlock;
+  }
+  render(block, renderContext) {
+    return (h("div", { style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.nodes.map((node) => {
+      return RTEImageNodeRenderer$1.render(node, renderContext);
+    })));
+  }
+}
+const RTEImageBlockRenderer$1 = new RTEImageBlockRenderer();
+
+class RTEListItemBlockRenderer extends RTEBlockTextNodesRenderer {
+  render(block, renderContext) {
+    return (h("li", { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
+      super.renderNodes(block, renderContext),
+      this.renderChildren(block.children, renderContext)));
+  }
+  renderChildren(children, renderContext) {
+    return children === null || children === void 0 ? void 0 : children.map((block) => RTEListBlockRenderer$1.render(block, renderContext));
+  }
+}
+const RTEListItemBlockRenderer$1 = new RTEListItemBlockRenderer();
+
+class RTEListBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEListBlock;
+  }
+  render(block, renderContext) {
+    const BlockTag = block.type === 'number-list' ? 'ol' : 'ul';
+    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block) }, block.blocks.map((listItemBlock) => RTEListItemBlockRenderer$1.render(listItemBlock, renderContext))));
+  }
+}
+const RTEListBlockRenderer$1 = new RTEListBlockRenderer();
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -31,8 +317,19 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
+    this.blockRenderers = [
+      RTETextBlockRenderer$1,
+      RTEImageBlockRenderer$1,
+      RTEListBlockRenderer$1,
+    ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
+  componentWillLoad() {
+    this.setRTEContent();
+  }
+  watchValueUpdate() {
+    this.setRTEContent();
+  }
   /**
    * Get the rich text content element
    *
@@ -44,13 +341,27 @@ class VegaRichTextContentRenderer extends VegaSlimmer {
   render() {
     return h(Host, null, this.renderRichTextContent());
   }
+  setRTEContent() {
+    if (this.content && !(this.content instanceof VegaRTEContent)) {
+      this.content = VegaRTEContent.fromJSON(this.content);
+    }
+  }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
     return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
   }
   renderContent() {
     var _a;
-    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => block.render({ editable: this.contentEditable }));
+    const renderContext = { editable: this.contentEditable };
+    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => {
+      const blockRenderer = this.getBlockRenderer(block);
+      if (blockRenderer) {
+        return blockRenderer.render(block, renderContext);
+      }
+    });
+  }
+  getBlockRenderer(block) {
+    return this.blockRenderers.find((renderer) => renderer.canHandle(block));
   }
   shouldShowPlaceholder() {
     var _a;
@@ -77,6 +388,12 @@ __decorate$2([
 __decorate$2([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentRenderer.prototype, "content", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaRichTextContentRenderer.prototype, "componentWillLoad", null);
+__decorate$2([
+  MapToComponentMethod('watchValueUpdate')
+], VegaRichTextContentRenderer.prototype, "watchValueUpdate", null);
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -141,6 +458,8 @@ const VegaRichTextContent = class {
      */
     this.contentEditable = false;
   }
+  watchValueUpdate() {
+  }
   /**
    * Invoke this method to focus on rich text content editable div
    *
@@ -157,6 +476,9 @@ const VegaRichTextContent = class {
     return sanitizeVegaComponent(this.vegaRichTextContentRenderer.render(), this.host);
   }
   get host() { return getElement(this); }
+  static get watchers() { return {
+    "content": ["watchValueUpdate"]
+  }; }
 };
 __decorate([
   InjectVegaGlobalSlimmer()

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

@@ -1,49 +1,50 @@
-import { d as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, h, H as Host, F as Fragment, I as InjectVegaSlimmer, L as LogUtility, r as registerInstance, e as createEvent, g as getElement } from './global-slimmer-registry-6887a59f.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { g as getActiveElement, s as sanitizeVegaComponent } from './component-051a594c.js';
+import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-187f71d1.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer, L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { g as getActiveElement, s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory, c as VegaDropdownClick, V as VegaChange, O as Observer, Q as VegaImageInserted, b as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-observer-factory-80358591.js';
-import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, V as VegaInternalRichTextEditorFlushChanges, o as VegaInternalRichTextImageClick, p as VegaInternalRichTextImageDeleteButtonClicked, k as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-4af5c6e9.js';
-import { a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer } from './text-color-toolbar-button-slimmer-b2270b64.js';
-import { V as VegaInternalIconManager } from './internal-icon-manager-7fc7535a.js';
-import { B as BoldAnnotationAction, R as RTETextBlock, T as TextStyleAnnotationAction, a as TextStyleAnnotation, I as IndentAnnotation, b as RTEImageNode, c as RTEListItemBlock, H as HorizontalAlignmentAnnotation, V as VegaRTEContent, d as RemoveChildAction, A as AppendChildNodesAction, e as InsertBlocksBeforeAction, M as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, f as ReplaceChildNodesAction, g as RTEListBlock, h as RTEImageBlock, i as InsertBlocksAfterAction, j as ImageAnnotationAction } from './content-state-4b036bf1.js';
-import { a as NodeAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, R as RTENode, s as stateEntityRenderingRegistry, I as InternalAnnotationTypeEnum, V as VegaThemeManager } from './node.abstract-93746055.js';
-import { R as RTETextNode, T as TextSplittableAction, I as ItalicAnnotation, e as UnderlineAnnotation, B as BoldAnnotation, C as ClearFormattingAnnotationAction, f as CodeAnnotationAction, g as StrikethroughAnnotation, A as AnnotationAction, h as SelectionRangeAnnotation, L as LinkAnnotationAction, b as waitForComponentDidRender, Z as ZERO_WIDTH_SPACE, U as UpdateTextAction, d as RTE_TEXT_COLORS, i as TextNodeRenderingRegistry } from './text-node-a652ca87.js';
-import { e as BlockAnnotationTypeEnum } from './block-annotation.abstract-b0554e2b.js';
-import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-14cb4599.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-de5fe574.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-c03cf145.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-6e97a58a.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory, b as VegaDropdownClick, f as VegaChange, O as Observer, P as VegaImageInserted, a as VegaClick, L as VegaPopoverShow, M as VegaPopoverHide } from './dom-node-subject-factory-5831cdd4.js';
+import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, V as VegaInternalRichTextEditorFlushChanges, p as VegaInternalRichTextImageClick, q as VegaInternalRichTextImageDeleteButtonClicked, l as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-458939b6.js';
+import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-8a12e0bd.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
+import { f as RTETextNode, B as BoldAnnotationAction, T as TextSplittableAction, g as ItalicAnnotation, U as UnderlineAnnotation, R as RTETextBlock, h as TextStyleAnnotationAction, i as TextStyleAnnotation, j as BoldAnnotation, C as ClearFormattingAnnotationAction, k as CodeAnnotationAction, S as StrikethroughAnnotation, A as AnnotationAction, l as SelectionRangeAnnotation, L as LinkAnnotationAction, c as waitForComponentDidRender, m as IndentAnnotation, n as RTEImageNode, o as RTEListItemBlock, H as HorizontalAlignmentAnnotation, Z as ZERO_WIDTH_SPACE, V as VegaRTEContent, p as UpdateTextAction, q as RemoveChildAction, r as AppendChildNodesAction, s as InsertBlocksBeforeAction, M as MergeTwoBlocksNodesAction, t as SplitBlockWithNodeAction, u as ReplaceChildNodesAction, e as RTE_TEXT_COLORS, b as RTEListBlock, a as RTEImageBlock, v as InsertBlocksAfterAction } from './content-state-42a06d75.js';
+import { c as NodeAnnotationTypeEnum, a as BlockAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, R as RTENode, s as stateEntityRenderingRegistry, I as InternalAnnotationTypeEnum, V as VegaThemeManager } from './node-annotation.abstract-af11b11b.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6ef5641b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-7d5a295a.js';
 import { d as debounce } from './timer-9321173b.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { f as findParent, r as rgbToHex } from './ui-5600b48f.js';
+import { f as findParent, r as rgbToHex } from './ui-62e4be97.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-e06a3840.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-dfde0cfa.js';
-import './vega-dialog-controller-5b23f68c.js';
-import './icon-manager-3cef32e7.js';
-import './translation-b3fe8e74.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-8ceabe63.js';
+import './vega-skeleton-loader-controller-0aaaf1fa.js';
+import './feature-flag-controller-4b3fe6f8.js';
+import './vega-dialog-controller-34eb8967.js';
+import './icon-manager-b889176b.js';
+import './translation-a98970d8.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-97aae8a8.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { t as trashCan } from './trash-can-8819a939.js';
-import { r as remoteInvocationRegistry } from './remote-invocation-registry-2ec6936d.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-d97fa3bc.js';
 import './type-guard-158f6d7a.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './_commonjsHelpers-9943807e.js';
-import './internal-vega-z-index-manager-89e8b6f5.js';
-import './number-4398f2e1.js';
-import './dynamic-slimmer-85746483.js';
-import './page-resize-observer-slimmer-8589ebc8.js';
-import './breakpoints-91116111.js';
-import './internal-vega-event-manager-3a3815d3.js';
+import './dynamic-slimmer-90b8af32.js';
 import './string-be824360.js';
-import './mutation-observer-slimmer-ca2cb2e8.js';
+import './page-resize-observer-slimmer-beb7b0bd.js';
+import './breakpoints-91116111.js';
+import './mutation-observer-slimmer-6cef9549.js';
 import './mutation-observer-filters-1035b064.js';
 import './array-b668466e.js';
+import './number-4398f2e1.js';
+import './internal-vega-event-manager-07e1b3d9.js';
+import './internal-vega-z-index-manager-7d2b54c3.js';
 import './index-44c794b4.js';
 
 var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2152,11 +2153,22 @@ class ValueController extends VegaSlimmer {
   disconnectedCallback() {
     ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = 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 VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
       this.value = VegaRTEContent.createEmptyContent();
     }
     else {
@@ -2204,6 +2216,9 @@ __decorate$c([
 __decorate$c([
   MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
+__decorate$c([
+  MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
 __decorate$c([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
@@ -3656,12 +3671,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 RTEListItemBlock.from({
+      id: 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(),
@@ -4002,7 +4065,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[]>}
  */
@@ -4014,11 +4077,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',
@@ -4409,7 +4473,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
      */

package/dist/esm/vega-section-title.entry.js

@@ -1,6 +1,7 @@
-import { d as MapToComponentField, V as VegaSlimmer, h, r as registerInstance, H as Host, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
+import { h, r as registerInstance, H as Host, g as getElement } from './index-187f71d1.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;