@heartlandone/vega 2.80.0 → 2.82.0

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-block/title-filter-styles-strategy.js

@@ -0,0 +1,16 @@
+import { TextStyleAnnotation } from '../../annotations/text-style-annotation';
+import { ParagraphFilterStylesStrategy } from './paragraph-filter-styles-strategy';
+/**
+ * The TitleFilterStylesStrategy class is responsible for filtering and refilling styles for title and subtitle text blocks in the rich text editor.
+ */
+export class TitleFilterStylesStrategy extends ParagraphFilterStylesStrategy {
+  constructor(titleType) {
+    super();
+    this.type = 'title';
+    this.elementTagName = 'div';
+    this.classNameToBeAdded = 'v-rte-title';
+    this.type = titleType;
+    this.classNameToBeAdded = `v-rte-${titleType}`;
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles(this.type);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-node/code-filter-styles-strategy.js

@@ -1,13 +1,14 @@
-import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
 import { CodeAnnotation } from '../../annotations/code-annotation';
+import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
 /**
- * Filters the default CodeAnnotation styles (fontFamily, whiteSpace) from
- * customStyle when parsing an RTETextNode that has a `code` annotation.
+ * The CodeFilterStylesStrategy is responsible for filtering code styles from text nodes that are annotated as code.
  */
 export class CodeFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
     super(...arguments);
     this.stylesToBeFiltered = CodeAnnotation.getDefaultStyles();
+    this.elementTagName = 'code';
   }
   /**
    * Only strips code-default styles when the `code` annotation is present,
@@ -23,4 +24,32 @@ export class CodeFilterStylesStrategy extends RTEFilterStylesStrategy {
     }
     return super.filterAnnotations(annotations);
   }
+  /**
+   * Determines whether the dto instance is a code text node.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} - True if the instance is a code text node, false otherwise.
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isCodeNode(blockOrNodeInstance);
+  }
+  /**
+   * Check if the node is a text node and it is a code node.
+   *
+   * @param {string} blockOrNodeClassName - The class name of the block or node instance to check.
+   * @param {HTMLElement} element - The HTML element of the node instance.
+   * @returns {boolean} True if the node is a text node it a code element.
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return Predicate.isTextNode(blockOrNodeClassName) && element.matches(this.elementTagName);
+  }
+  /**
+   * The code style in title and heading no need to be bold in default.
+   *
+   * @returns {string} The CSS text string for code styles.
+   */
+  toCssText() {
+    const selector = `.${RTEFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${this.elementTagName}`;
+    return `${selector} { ${this.convertStylesMapToCssText(Object.assign(Object.assign({}, this.stylesToBeFiltered), { fontWeight: '500' }))} }`;
+  }
 }

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-node/link-filter-styles-strategy.js

@@ -1,14 +1,14 @@
 import { LinkGroupAnnotation } from '../../annotations/link-group-annotation';
 import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
 /**
- * Filters the default internal link styles (color) from `link.customStyle` when
- * parsing an RTETextNode. Vega applies these styles during standalone rendering;
- * they are redundant when parsed back and must not be persisted as custom overrides.
+ * The LinkFilterStylesStrategy is responsible for filtering link styles from text nodes that are annotated as links.
  */
 export class LinkFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
     super(...arguments);
     this.stylesToBeFiltered = LinkGroupAnnotation.getDefaultStyles();
+    this.elementTagName = 'a';
   }
   /**
    * Filter default link styles from `link.customStyle` in annotations.
@@ -27,4 +27,43 @@ export class LinkFilterStylesStrategy extends RTEFilterStylesStrategy {
     }
     return annotations;
   }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isLinkNode(blockOrNodeInstance);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return blockOrNodeClassName === 'RTETextNode' && element.matches(this.elementTagName);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+  /**
+   * Filters the inline styles for a link group annotation and updates the attributes accordingly.
+   *
+   * @param {Record<string, string | AnnotationStyle>} attributes The attributes of the link group annotation.
+   * @returns {Record<string, string | AnnotationStyle>} The updated attributes after filtering.
+   */
+  filterLinkGroupInlineStyles(attributes) {
+    const fullStyles = attributes.style;
+    const classNames = attributes.class ? attributes.class.split(' ') : [];
+    const filterResult = this.filterAndDeleteStyles(fullStyles, classNames);
+    filterResult.styles &&
+      Object.keys(filterResult.styles).length > 0 &&
+      (attributes.style = filterResult.styles);
+    filterResult.classNames &&
+      filterResult.classNames.length > 0 &&
+      (attributes.class = filterResult.classNames.join(' '));
+    if (attributes.style && Object.keys(attributes.style).length === 0) {
+      delete attributes.style;
+    }
+    return attributes;
+  }
 }

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-node/title-heading-node-filter-styles-strategy.js

@@ -0,0 +1,108 @@
+import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
+/**
+ * The TitleHeadingNodeFilterStylesStrategy is responsible for filtering styles from text nodes that are children of title and heading blocks.
+ * In title and heading blocks, the text nodes will have a default bold style.
+ */
+export class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = TitleHeadingNodeFilterStylesStrategy.BOLD_STYLES;
+    this.elementTagName = 'span';
+    this.parentBlockTypes = [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+    ];
+    this.parentElementSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', '.v-rte-title'];
+    this.toBeCheckedSelector = this.parentElementSelectors.join(',');
+  }
+  /**
+   * Don't run filterAnnotations method, because already handle it in text format filter strategy.
+   *
+   * @inheritDoc
+   */
+  filterAnnotations(annotations) {
+    return annotations;
+  }
+  /**
+   * Determines whether the dto instance is text node and its parent block is a heading or title.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} - True if the instance is a text node and its parent block is a heading or title, false otherwise.
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate.isTextNode(blockOrNodeInstance.constructor.name) &&
+      this.parentBlockIsHeadingOrTitle(blockOrNodeInstance));
+  }
+  /**
+   * Check if the node is a text node and its parent block is a heading or title.
+   *
+   * @param {string} blockOrNodeClassName - The class name of the block or node instance to check.
+   * @param {HTMLElement} element - The HTML element of the node instance.
+   * @returns {boolean} True if the node is a text node and its parent block is a heading or title, false otherwise.
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate.isTextNode(blockOrNodeClassName) &&
+      element.nodeName === 'SPAN' &&
+      this.isHeadingOrTitleChild(element));
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    const selectors = this.parentElementSelectors.map((key) => `.${TitleHeadingNodeFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${key}`);
+    return `${selectors.join(',')} { ${this.convertStylesMapToCssText()} }`;
+  }
+  /**
+   * Checks if the parent block of the given node instance is a heading or title.
+   *
+   * @param {RTENode | RTEBlock} blockOrNodeInstance - The node instance to check.
+   * @returns {boolean} True if the parent block is a heading or title, false otherwise.
+   */
+  parentBlockIsHeadingOrTitle(blockOrNodeInstance) {
+    const parentBlock = blockOrNodeInstance.parent;
+    return parentBlock ? this.parentBlockTypes.includes(parentBlock.type) : false;
+  }
+  /**
+   * Check if the element is a descendant of a heading or title element.
+   * Traverses upward through the DOM, stopping at the block element or body element
+   * to avoid unbounded traversal to the document root.
+   *
+   * <h1><span>bold text</span></h1>
+   * <h1><a><span>link text</span></a></h1>
+   * <h1><a><b><span>nested text</span></b></a></h1>
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} True if the element is a descendant of a heading or title, false otherwise.
+   */
+  isHeadingOrTitleChild(element) {
+    let current = element.parentElement;
+    while (current) {
+      if (current.matches(this.toBeCheckedSelector))
+        return true;
+      // Stop traversing upward if we reach a block element to prevent unbounded traversal to the document root. The title children will always be wrapped in a div, so we can safely stop at div as well.
+      if (TitleHeadingNodeFilterStylesStrategy.NON_HEADING_TITLE_ELEMENT_TAGS.includes(current.tagName))
+        return false;
+      current = current.parentElement;
+    }
+    return false;
+  }
+}
+TitleHeadingNodeFilterStylesStrategy.BOLD_STYLES = {
+  fontWeight: '700',
+};
+TitleHeadingNodeFilterStylesStrategy.NON_HEADING_TITLE_ELEMENT_TAGS = [
+  'TD',
+  'TH',
+  'TR',
+  'TABLE',
+  'THEAD',
+  'TBODY',
+  'DIV',
+  'BODY',
+];

package/dist/collection/components/vega-rich-text-editor/dto/nodes/code-block-node.js

@@ -5,6 +5,9 @@ import { UpdateCodeBlockStrategy } from '../action-handle-strategies/modify-cont
 import { SelectionChangeAction } from '../actions/selection-change-action';
 import { CodeNodeSetSelectionRangeAnnotationStrategy } from '../action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy';
 import { RTEDecoratorNode } from './decorator-node';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
+import { CodeBlockNodeFilterStylesStrategy } from '../filter-styles-strategies/code-block/code-node-filter-styles-strategy';
+import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
 /**
  * RTE code node DTO class.
  */
@@ -17,6 +20,7 @@ export class RTECodeBlockNode extends RTEDecoratorNode {
     this.text = content;
     this.parent = parentBlock;
     this.language = language;
+    this.annotationMap.set(CommonAnnotationTypeEnum.CUSTOM_STYLE, new CustomStyleAnnotation(CodeBlockNodeFilterStylesStrategy.STYLES));
   }
   /**
    * The code node toJSON method will called internal.
@@ -29,8 +33,9 @@ export class RTECodeBlockNode extends RTEDecoratorNode {
   /**
    * @inheritDoc
    */
-  toHtml() {
-    return `<code style='box-sizing: border-box;color: rgba(var(--v-text-primary, 32, 54, 69, 1));text-align: left;font-family: "Roboto Mono";font-weight: 400;line-height: 22px;font-size: 16px;white-space: pre-wrap;min-height: 22px;tab-size: 2px;'>${this.text}</code>`;
+  toHtml(options) {
+    const attrs = this.generateAttributeString(options);
+    return `<code${attrs}>${this.text}</code>`;
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/dto/nodes/image-node.js

@@ -75,9 +75,9 @@ export class RTEImageNode extends RTEDecoratorNode {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    const attrStr = super.generateAttributeString(...[
+    const attrStr = super.generateAttributeString(options, ...[
       imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
       `src="${this.url}"`,
       imageAnnotation && imageAnnotation.size ? `data-size="${imageAnnotation.size}"` : null,

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -11,6 +11,7 @@ import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstr
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { methodPlaceholder } from 'vega-slimmer/core';
 import { RTEAnnotationStyle } from '../annotations/annotation-style';
+import { RTEFilterStylesStrategyRegistry } from '../filter-styles-strategies/filter-styles-strategy-registry';
 export var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
@@ -138,21 +139,31 @@ export class RTENode {
   /**
    * Generate attributes as string
    *
+   * @param {VegaRTETransformOptions} [options] - Options for converting the node to HTML.
    * @param {...string} attrs - Additional attributes to include
    * @returns {string} - Attributes as string
    */
-  generateAttributeString(...attrs) {
+  generateAttributeString(options, ...attrs) {
     var _a;
     const nodeAnnotationStyle = new RTEAnnotationStyle(this);
-    const styles = nodeAnnotationStyle.toCssText({ standalone: true }, [
+    const fullStyles = nodeAnnotationStyle.toJSON({ standalone: true }, [
       'textDecoration',
     ]);
     const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    let styles = fullStyles;
+    let classNames = customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.renderClass();
+    if (options && options.filterInlineStyles) {
+      const filterResult = RTEFilterStylesStrategyRegistry.executeTheStrategyFilterAction(this, fullStyles, classNames);
+      styles = filterResult.styles;
+      classNames = filterResult.classNames;
+    }
     const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
     const attributes = [
       ...customAttributeString,
-      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
-      styles ? `style="${styles}"` : null,
+      classNames && classNames.length > 0 ? `class="${classNames.join(' ')}"` : null,
+      styles && Object.keys(styles).length > 0
+        ? `style="${nodeAnnotationStyle.toCssText({ standalone: true }, undefined, styles)}"`
+        : null,
       ...attrs,
     ].filter(isNonNullable);
     return attributes.length ? ` ${attributes.join(' ')}` : '';

package/dist/collection/components/vega-rich-text-editor/dto/nodes/text-node.js

@@ -30,6 +30,7 @@ import { InlineHtmlAnnotation } from '../annotations/inline-html-annotation';
 import { LinkGroupNodeSplitStrategy } from '../action-handle-strategies/modify-content-strategies/link-group-node-split-strategy';
 import { DeleteLinkGroupStrategy } from '../action-handle-strategies/modify-content-strategies/delete-link-group-strategy';
 import { PlainTextAnnotation } from '../annotations/plain-text-annotation';
+import { HTML_VOID_TAGS } from '../../constants/constant';
 import { LinkAnnotationAction } from '../actions/link-annotation-action';
 import { BoldAnnotationAction } from '../actions/bold-annotation-action';
 import { ClearFormattingAnnotationAction } from '../actions/clear-formatting-annotation-action';
@@ -144,9 +145,11 @@ export class RTETextNode extends RTENode {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const inlineHtmlAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
-    return inlineHtmlAnnotation ? this.renderWithWrapperStr(inlineHtmlAnnotation) : this.renderTextStr();
+    return inlineHtmlAnnotation
+      ? this.renderWithWrapperStr(inlineHtmlAnnotation, options)
+      : this.renderTextStr(options);
   }
   /**
    * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
@@ -171,6 +174,9 @@ export class RTETextNode extends RTENode {
    * @returns {boolean}  It returns `true` if the node is empty
    */
   isEmpty() {
+    // Inline HTML annotations (e.g., <br>) are considered non-empty even with empty text content.
+    if (this.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML))
+      return false;
     return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
   }
   /**
@@ -210,6 +216,54 @@ export class RTETextNode extends RTENode {
   isContentEditable() {
     return true;
   }
+  /**
+   * Returns the inline HTML wrapper descriptor at the given depth in the
+   * annotation chain. Depth 0 is the outermost wrapper, depth 1 is its child, etc.
+   *
+   * @param {number} depth - Zero-based depth in the inline HTML chain.
+   * @returns {InlineHtmlTagDescriptor | null} The wrapper descriptor at that depth, or `null`.
+   */
+  getInlineHtmlTagAtDepth(depth) {
+    const annotation = this.getInlineHtmlAnnotationAtDepth(depth);
+    if (!annotation)
+      return null;
+    if (HTML_VOID_TAGS.has(annotation.htmlTag))
+      return null;
+    return {
+      htmlTag: annotation.htmlTag,
+      attrStr: this.annotationAttrStr(annotation),
+      groupId: annotation.groupId,
+      annotation,
+    };
+  }
+  /**
+   * Renders the node starting from the given depth in the inline HTML chain.
+   * Depth 0 renders the full chain (equivalent to {@link toHtml} for inline HTML nodes).
+   *
+   * @param {number} depth - Zero-based depth to start rendering from.
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
+   * @returns {string} HTML string from that depth onward.
+   */
+  renderHtmlFromDepth(depth, options) {
+    const annotation = this.getInlineHtmlAnnotationAtDepth(depth);
+    if (!annotation)
+      return this.renderTextStr(options);
+    return this.renderWithWrapperStr(annotation, options);
+  }
+  /**
+   * Traverses the inline HTML annotation chain to the given depth and returns
+   * the annotation at that level, or `null` if the chain is shorter.
+   *
+   * @param {number} depth - Zero-based depth (0 = outermost annotation).
+   * @returns {Nullable<InlineHtmlAnnotation>} The annotation at that depth, or `null`.
+   */
+  getInlineHtmlAnnotationAtDepth(depth) {
+    let current = this.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
+    for (let i = 0; i < depth && current; i++) {
+      current = current.child;
+    }
+    return current;
+  }
   /**
    * Registers the action strategies for the RTETextNode.
    */
@@ -308,35 +362,51 @@ export class RTETextNode extends RTENode {
     }
   }
   /**
-   * Render the text node with the inline HTML wrapper.
-   *
-   * @param {VegaInlineHtmlSchema} inlineHtmlNode - The inline HTML schema to wrap the text node.
+   * @param {InlineHtmlAnnotation} inlineHtmlNode - The inline HTML annotation to wrap the text node.
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
    * @returns {string} The HTML string representation of the text node wrapped with the inline HTML.
    */
-  renderWithWrapperStr(inlineHtmlNode) {
-    const { htmlTag, customAttribute, customClass, customStyle, child } = inlineHtmlNode;
+  renderWithWrapperStr(inlineHtmlNode, options) {
+    const { htmlTag, child } = inlineHtmlNode;
+    const attrStr = this.annotationAttrStr(inlineHtmlNode);
+    if (!child) {
+      if (HTML_VOID_TAGS.has(htmlTag)) {
+        return `<${htmlTag}${attrStr}>`;
+      }
+      if (!this.text) {
+        return `<${htmlTag}${attrStr}></${htmlTag}>`;
+      }
+      return `<${htmlTag}${attrStr}>${this.renderTextStr(options)}</${htmlTag}>`;
+    }
+    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child, options)}</${htmlTag}>`;
+  }
+  /**
+   * Generate the attribute string for the inline HTML annotation
+   *
+   * @param {InlineHtmlAnnotation} annotation - The inline HTML annotation
+   * @returns {string} The attribute string for the inline HTML annotation
+   */
+  annotationAttrStr(annotation) {
+    const { customAttribute, customClass, customStyle } = annotation;
     const attrs = [
       ...((customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.toString()) || []),
       customClass === null || customClass === void 0 ? void 0 : customClass.toString(),
       customStyle === null || customStyle === void 0 ? void 0 : customStyle.toString(),
     ].filter(isNonNullable);
-    const attrStr = attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
-    if (!child) {
-      return `<${htmlTag}${attrStr}>${this.renderTextStr()}</${htmlTag}>`;
-    }
-    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child)}</${htmlTag}>`;
+    return attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
   }
   /**
    * Generates the HTML representation of the text node.
    *
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
    * @returns {string} The HTML string representation of the text node.
    */
-  renderTextStr() {
+  renderTextStr(options) {
     var _a;
     const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
       ? 'code'
       : 'span';
-    const attrStr = super.generateAttributeString();
+    const attrStr = super.generateAttributeString(options);
     // If the text contains a newline character, we need to replace it with a <br> tag.
     if (this.text === '\n') {
       return `<br>`;

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-text-nodes-renderer.abstract.js

@@ -3,6 +3,7 @@ import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstrac
 import { RTEBlockRenderer } from './block-renderer.abstract';
 import RTELinkWrapperRenderer from './link-wrapper-renderer';
 import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
+import RTETextNodeRenderer from '../nodes/text-node-renderer';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
  */
@@ -18,11 +19,65 @@ export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
     const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
     return linkGroupAnnotation
       ? RTELinkWrapperRenderer.render(block.children, linkGroupAnnotation, renderContext)
-      : block.children.map((node) => {
-        const nodeRenderer = RTEDTORendererManager.getRTERenderer(node.type);
-        if (nodeRenderer) {
-          return nodeRenderer.render(node, renderContext, h);
-        }
-      });
+      : this.renderGroupedNodesAtDepth(block.children, 0, renderContext);
+  }
+  /**
+   * Recursively groups `nodes` by their inline HTML wrapper `groupId` at the given
+   * `depth`, emitting a single shared wrapper element for adjacent siblings and
+   * descending into the next depth for each group.  Nodes without a `groupId` at
+   * the current depth are rendered individually (same as the non-grouped path).
+   *
+   * @param {RTETextNode[]} nodes - The nodes to render.
+   * @param {number} depth - Current depth in the inline HTML chain (0 = outermost).
+   * @param {RTERenderContext} renderContext - The render context.
+   * @returns {(HTMLElement | VNode)[]} Rendered nodes/elements at this depth.
+   */
+  renderGroupedNodesAtDepth(nodes, depth, renderContext) {
+    var _a;
+    const result = [];
+    let i = 0;
+    while (i < nodes.length) {
+      const tag = nodes[i].getInlineHtmlTagAtDepth(depth);
+      if (!(tag === null || tag === void 0 ? void 0 : tag.groupId)) {
+        result.push(this.renderNodeFromDepth(nodes[i], depth, renderContext));
+        i++;
+        continue;
+      }
+      let groupEnd = i + 1;
+      while (groupEnd < nodes.length &&
+        ((_a = nodes[groupEnd].getInlineHtmlTagAtDepth(depth)) === null || _a === void 0 ? void 0 : _a.groupId) === tag.groupId) {
+        groupEnd++;
+      }
+      if (groupEnd === i + 1) {
+        // Single node in group — render normally from this depth.
+        result.push(this.renderNodeFromDepth(nodes[i], depth, renderContext));
+      }
+      else {
+        // Multiple nodes share a wrapper — emit the wrapper once and recurse.
+        const attrs = tag.annotation.renderProps();
+        const inner = this.renderGroupedNodesAtDepth(nodes.slice(i, groupEnd), depth + 1, renderContext);
+        result.push(h(tag.htmlTag, attrs, inner));
+      }
+      i = groupEnd;
+    }
+    return result;
+  }
+  /**
+   * Renders a single node starting from the given inline HTML depth.
+   * At depth 0 the full annotation chain is rendered normally.
+   * At depth > 0 the chain begins at that depth (the outer wrappers have
+   * already been emitted by the grouping logic above).
+   *
+   * @param {RTETextNode} node - The node to render.
+   * @param {number} depth - Depth in the inline HTML chain to start from.
+   * @param {RTERenderContext} renderContext - The render context.
+   * @returns {HTMLElement | VNode} The rendered node.
+   */
+  renderNodeFromDepth(node, depth, renderContext) {
+    if (depth === 0) {
+      const nodeRenderer = RTEDTORendererManager.getRTERenderer(node.type);
+      return nodeRenderer.render(node, renderContext, h);
+    }
+    return RTETextNodeRenderer.renderFromAnnotation(node, node.getInlineHtmlAnnotationAtDepth(depth));
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/text-block-renderer.js

@@ -2,8 +2,24 @@ import { h } from '@stencil/core';
 import { RTEBlockTextNodesRenderer } from './block-text-nodes-renderer.abstract';
 class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
   render(block, renderContext) {
+    if (block.shouldRenderAsInternalWrapper()) {
+      const outerTag = this.getOuterInlineTag(block.children);
+      if (outerTag) {
+        const OuterTag = outerTag.htmlTag;
+        return (h(OuterTag, Object.assign({}, outerTag.annotation.renderProps(), { key: block.id, ref: (ref) => super.registerRef(ref, block) }), super.renderGroupedNodesAtDepth(block.children, 1, renderContext)));
+      }
+    }
     const BlockTag = block.getBlockTag();
     return (h(BlockTag, Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), super.renderNodes(block, renderContext)));
   }
+  /**
+   * Returns the promotable inline HTML tag when the block wraps exactly one
+   * inline-HTML element (e.g. `<summary>`, `<section>`), or `null` otherwise.
+   */
+  getOuterInlineTag(children) {
+    if (children.length !== 1)
+      return null;
+    return children[0].getInlineHtmlTagAtDepth(0);
+  }
 }
 export default new RTETextBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/text-node-renderer.js

@@ -3,10 +3,21 @@ import { RTENodeRenderer } from './node-renderer.abstract';
 import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
 import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
 class RTETextNodeRenderer extends RTENodeRenderer {
-  render(node) {
-    const inlineHtmlAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
+  /**
+   * Renders the text node wrapped in the given annotation chain starting from the
+   * provided annotation level. Used by the grouped node renderer to render a node
+   * inside an already-emitted outer wrapper.
+   *
+   * @param {RTETextNode} node - The text node to render.
+   * @param {Nullable<InlineHtmlAnnotation>} annotation - Starting annotation, or null for text-only.
+   * @returns {HTMLElement} The rendered element.
+   */
+  renderFromAnnotation(node, annotation) {
     const textNodeDom = this.renderText(node);
-    return inlineHtmlAnnotation ? this.renderWithWrapper(textNodeDom, inlineHtmlAnnotation) : textNodeDom;
+    return annotation ? this.renderWithWrapper(textNodeDom, annotation) : textNodeDom;
+  }
+  render(node) {
+    return this.renderFromAnnotation(node, node.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML));
   }
   renderWithWrapper(textNodeDom, inlineHtmlNode) {
     const { htmlTag: HtmlTag, customStyle, customAttribute, customClass, } = inlineHtmlNode;