@heartlandone/vega 2.80.0 → 2.81.0

package/dist/esm/{content-state-084cd705.js → content-state-89f8eecb.js}

@@ -1,11 +1,10 @@
-import { f as ActionHandleStrategy, d as RTETextBlock, b as RTETextNode, g as AppendChildrenAction, A as ActionHandleStrategyRegistry, T as TextStyleAnnotationAction, o as BlockUpdateTextStyleStrategy, H as HorizontalAlignmentAnnotationAction, p as BlockUpdateHorizontalAlignmentStrategy, k as ModifyContentActionType, q as BlockInsertLineBreakStrategy, r as BlockInsertLineBreakWithBlocksStrategy, t as BlockSplitWithTextNodeStrategy, u as BlockReplaceNodesStrategy, v as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, m as RemoveChildrenAction, S as SyncUpSelectionAction, i as InsertChildrenBeforeAction, B as BlockAnnotation, w as BlockAnnotationTypeEnum, c as RTEBlock, x as CustomStyleAnnotation, y as CustomClassAnnotation, n as CustomAttributeAnnotation, z as RTECodeBlock, s as stateEntityRenderingRegistry, N as NodeAnnotation, D as NodeAnnotationTypeEnum, E as RTEDecoratorNode, F as NodeTypeEnum, G as CommonAnnotation, l as AnnotationAction, J as ReplaceChildNodesAction, M as ModifyContentAction, K as SplitBlockWithNodeAction, L as BlockDeleteNodeContentStrategy, U as UpdateTextAction, O as RemoveChildrenStrategy, P as BOLD_FONT_WEIGHT_KEYWORD, Q as BOLD_FONT_WEIGHT, W as RTE_TEXT_COLORS, X as RTE_DEFAULT_TEXT_COLOR, Y as ITALIC_FONT_STYLE, Z as STRIKETHROUGH_TEXT_DECORATION, _ as UNDERLINE_TEXT_DECORATION, $ as TextStyleAnnotation, a0 as HorizontalAlignmentAnnotation, a1 as CodeAnnotation, a2 as LinkGroupAnnotation, R as RTEDTOClassManager } from './code-block-7d6f231b.js';
+import { g as ActionHandleStrategy, e as RTETextBlock, c as RTETextNode, h as AppendChildrenAction, A as ActionHandleStrategyRegistry, T as TextStyleAnnotationAction, q as BlockUpdateTextStyleStrategy, H as HorizontalAlignmentAnnotationAction, r as BlockUpdateHorizontalAlignmentStrategy, l as ModifyContentActionType, t as BlockInsertLineBreakStrategy, u as BlockInsertLineBreakWithBlocksStrategy, v as BlockSplitWithTextNodeStrategy, w as BlockReplaceNodesStrategy, x as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, n as RemoveChildrenAction, S as SyncUpSelectionAction, j as InsertChildrenBeforeAction, B as BlockAnnotation, y as BlockAnnotationTypeEnum, d as RTEBlock, z as CustomStyleAnnotation, D as CustomClassAnnotation, o as CustomAttributeAnnotation, E as RTECodeBlock, s as stateEntityRenderingRegistry, N as NodeAnnotation, F as NodeAnnotationTypeEnum, G as RTEDecoratorNode, J as NodeTypeEnum, K as CommonAnnotation, m as AnnotationAction, L as ReplaceChildNodesAction, M as ModifyContentAction, O as SplitBlockWithNodeAction, P as HTML_VOID_TAGS, Q as BlockDeleteNodeContentStrategy, U as UpdateTextAction, W as RemoveChildrenStrategy, X as BOLD_FONT_WEIGHT_KEYWORD, Y as BOLD_FONT_WEIGHT, Z as createStyleMapFromElement, _ as RTE_TEXT_COLORS, $ as RTE_DEFAULT_TEXT_COLOR, a0 as ITALIC_FONT_STYLE, a1 as STRIKETHROUGH_TEXT_DECORATION, a2 as UNDERLINE_TEXT_DECORATION, R as RTEFilterStylesStrategyRegistry, a3 as TextStyleAnnotation, p as RTEFilterStylesStrategy, a4 as Predicate$1, a5 as HorizontalAlignmentAnnotation, a6 as CodeAnnotation, b as RTEDTOClassManager, a7 as LinkFilterStylesStrategy, a8 as CodeBlockFilterStylesStrategy, a9 as RTECodeBlockNode, aa as CodeBlockNodeFilterStylesStrategy } from './code-block-cd913077.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { i as isNonNullable } from './type-guard-23a08026.js';
+import { i as isNonNullable } from './type-guard-f6c9c89d.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
 import { c as VegaInternalUpdateRTECursorPosition, d as VegaInternalRichTextEditorFlushChanges } from './vega-internal-event-id-70bd893d.js';
-import { d as dashCaseToCamel } from './string-a953eafc.js';
-import { r as rgbToHex, i as isHTMLElement } from './ui-ba5a4758.js';
+import { r as rgbToHex, i as isHTMLElement } from './ui-b7600a48.js';
 import { c as cleanObject } from './object-0c277f57.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 
@@ -114,13 +113,9 @@ class RTEListItemBlock extends RTETextBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
-    const attrStr = super.generateAttributeString();
-    return [
-      `<li${attrStr}>`,
-      this.children.map((node) => node.toHtml()).join(''),
-      `</li>`,
-    ].join('');
+  toHtml(options) {
+    const attrStr = super.generateAttributeString(options);
+    return [`<li${attrStr}>`, this.getChildrenHtml(options), `</li>`].join('');
   }
   /**
    * @inheritDoc
@@ -403,12 +398,12 @@ class RTEListBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const BlockTag = this.getBlockTag();
-    const attrStr = super.generateAttributeString();
+    const attrStr = super.generateAttributeString(options);
     return [
       `<${BlockTag}${attrStr}>`,
-      this.children.map((block) => block.toHtml()).join(''),
+      this.children.map((block) => block.toHtml(options)).join(''),
       `</${BlockTag}>`,
     ].join('');
   }
@@ -602,7 +597,7 @@ class ElementToDtoStrategyProcessor {
     const strategies = this.getElementToBlockStrategies();
     const outputs = [];
     for (let i = 0; i < elements.length; i++) {
-      if (this.isInvalidElement(elements[i]))
+      if (this.isInvalidElement(elements[i], options))
         continue;
       let canHandledCount = 0;
       for (const strategy of strategies) {
@@ -629,14 +624,21 @@ class ElementToDtoStrategyProcessor {
     return outputs;
   }
   /**
-   * Checks if the given element is valid to parse.
+   * Checks if the given element should be skipped during processing.
    *
-   * @param {HTMLElement} element - The pasted element.
-   * @returns {boolean} Is valid
+   * Comment nodes are always skipped. META and STYLE elements are skipped only
+   * in auto-match mode; in raw-HTML mode (autoMatchFormat: false) they are passed
+   * through so downstream strategies can decide how to handle them.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {VegaRTETransformOptions} options - Transform options.
+   * @returns {boolean} True when the element should be skipped.
    */
-  isInvalidElement(element) {
+  isInvalidElement(element, options) {
     if (element.nodeType === Node.COMMENT_NODE)
       return true;
+    if (options.autoMatchFormat === false)
+      return false;
     return ['META', 'STYLE'].includes(element.nodeName);
   }
   /**
@@ -822,6 +824,7 @@ class ImageAnnotation extends NodeAnnotation {
     }
   }
 }
+ImageAnnotation.BASE_STYLES = { verticalAlign: 'bottom' };
 
 /**
  * Update the image node annotation map strategy.
@@ -914,9 +917,9 @@ 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,
@@ -1136,9 +1139,9 @@ class RTEImageBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
-    const attrStr = super.generateAttributeString();
-    const children = this.children.map((node) => node.toHtml()).join('');
+  toHtml(options) {
+    const attrStr = super.generateAttributeString(options);
+    const children = this.children.map((node) => node.toHtml(options)).join('');
     return super.shouldRenderAsInternalWrapper()
       ? children
       : [`<div${attrStr}>`, children, `</div>`].join('');
@@ -1230,23 +1233,26 @@ class RTEHtmlBlock extends RTEBlock {
    * @inheritDoc
    */
   isNotEmpty() {
-    return this.children.length > 0;
+    // Any RTEHtmlBlock — whether void (hr, br), childless (canvas, iframe),
+    // or with children — represents real user content. Only the default empty
+    // text paragraph should make the editor report as empty.
+    return true;
   }
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const BlockTag = this.htmlTag;
-    const attrStr = super.generateAttributeString();
+    const attrStr = super.generateAttributeString(options);
     // Handle void/self-closing tags (hr, input, col, etc.)
     // Uses HTML5 syntax without self-closing slash for consistency with img and br tags
-    if (RTEHtmlBlock.VOID_TAGS.has(this.htmlTag)) {
+    if (HTML_VOID_TAGS.has(this.htmlTag)) {
       return `<${BlockTag}${attrStr}>`;
     }
     // Handle normal tags with children
     return [
       `<${BlockTag}${attrStr}>`,
-      this.children.map((block) => block.toHtml()).join(''),
+      this.children.map((block) => block.toHtml(options)).join(''),
       `</${BlockTag}>`,
     ].join('');
   }
@@ -1257,16 +1263,6 @@ class RTEHtmlBlock extends RTEBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
   }
 }
-/**
- * Void/self-closing tags that don't have closing tags and don't contain children.
- * These tags should be rendered as <tag> or <tag/> instead of <tag></tag>.
- *
- * Based on canHandleTags from html-block-strategy.ts, the following are void tags:
- * - HR: horizontal rule
- * - INPUT: form input
- * - COL: table column
- */
-RTEHtmlBlock.VOID_TAGS = new Set(['hr', 'input', 'col']);
 
 /**
  * Merge the two blocks node into first block if the two blocks nodes type is same(text node or image node)
@@ -1923,32 +1919,9 @@ class CustomStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @returns {VegaRTETextAnnotations} - Annotation.
    */
   handle(element) {
-    const styles = this.generateCustomStyleAnnotations(element);
+    const styles = createStyleMapFromElement(element);
     return Object.keys(styles).length > 0 ? { customStyle: styles } : {};
   }
-  /**
-   * Obtain and format the style of element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {AnnotationStyle} - Record<string, string>.
-   */
-  generateCustomStyleAnnotations(element) {
-    const customStyle = element.getAttribute('style');
-    if (!customStyle)
-      return {};
-    const styleValue = customStyle.split(';').filter(Boolean);
-    return styleValue
-      .filter((key) => key !== ' ')
-      .map((key) => {
-      // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
-      const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
-      const styleKey = dashCaseToCamel(styleObject[0].trim());
-      return {
-        [styleKey]: styleObject[1].trim().replace(';', ''),
-      };
-    })
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
 }
 
 /** Handle indent annotation */
@@ -2173,157 +2146,6 @@ class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   }
 }
 
-/** Handle link annotation */
-class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  constructor() {
-    super(...arguments);
-    this.handlers = [
-      new CustomAttributeAnnotationHandler(),
-      new CustomClassAnnotationHandler(),
-      new CustomStyleAnnotationHandler(),
-    ];
-  }
-  /**
-   * Can be handle.
-   *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @returns {boolean} - .
-   */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
-  }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
-   */
-  handle(element, parentAnnotations = {}) {
-    if (parentAnnotations.link)
-      return { link: parentAnnotations.link };
-    return element.tagName === 'A' ? { link: this.generateLinkAnnotations(element) } : {};
-  }
-  /**
-   * Generate link annotations.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTELink} - link annotations.
-   */
-  generateLinkAnnotations(element) {
-    const annotations = {
-      href: element.getAttribute('href') || '',
-      groupKey: generateUUID(),
-    };
-    this.handlers.forEach((handler) => {
-      Object.assign(annotations, handler.handle(element));
-    });
-    return annotations;
-  }
-}
-
-/** Handle strike through annotation */
-class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  /**
-   * @inheritDoc
-   */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
-  }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
-   */
-  handle(element, parentAnnotations = {}) {
-    return this.isStrikethrough(element) || parentAnnotations.strikethrough
-      ? { strikethrough: true }
-      : {};
-  }
-  /**
-   * Is strikethrough element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isStrikethrough(element) {
-    return (element.style.textDecoration.includes(STRIKETHROUGH_TEXT_DECORATION) ||
-      element.nodeName === 'S' ||
-      element.nodeName === 'DEL' ||
-      element.classList.contains('v-rte--strikethrough'));
-  }
-}
-
-/** Handle underline annotation */
-class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  /**
-   * @inheritDoc
-   */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
-  }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
-   */
-  handle(element, parentAnnotations = {}) {
-    return this.isUnderline(element) || parentAnnotations.underline ? { underline: true } : {};
-  }
-  /**
-   * Is underline element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isUnderline(element) {
-    return (element.style.textDecoration.includes(UNDERLINE_TEXT_DECORATION) ||
-      element.nodeName === 'U' ||
-      element.nodeName === 'INS' ||
-      element.classList.contains('v-rte--underline'));
-  }
-}
-
-/**
- * Registry for managing filter styles strategies keyed by DTO class name.
- *
- * Provides common `register` / `getStrategies` primitives that both output-
- * filtering strategies (DTO → HTML) and annotation-parsing strategies
- * (HTML → DTO) build upon.
- *
- * TODO: Currently, the filter styles strategies are applied for all rich text editors. We need to apply the strategies with a specific rich text editor instance when we have multiple rich text editors in the future.
- */
-class RTEFilterStylesStrategyRegistry {
-  /**
-   * Registers a filter styles strategy for a specific DTO class name.
-   * Duplicate strategy instances are ignored.
-   *
-   * @param {string} dtoClassName - The DTO class name (e.g. `RTEListBlock.name`).
-   * @param {RTEFilterStylesStrategy} strategy - The strategy instance to register.
-   */
-  static register(dtoClassName, strategy) {
-    var _a;
-    const set = (_a = this.registry.get(dtoClassName)) !== null && _a !== void 0 ? _a : new Set();
-    set.add(strategy);
-    this.registry.set(dtoClassName, set);
-  }
-  /**
-   * Retrieves all strategies registered for a given DTO class name.
-   *
-   * @param {string} dtoClassName - The DTO class name to look up.
-   * @returns {RTEFilterStylesStrategy[]} Registered strategies (empty array if none).
-   */
-  static getStrategies(dtoClassName) {
-    var _a;
-    return Array.from((_a = this.registry.get(dtoClassName)) !== null && _a !== void 0 ? _a : []);
-  }
-}
-RTEFilterStylesStrategyRegistry.registry = new Map();
-
 /** Handle text style annotation */
 class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
@@ -2437,7 +2259,8 @@ class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    */
   getElementTypeByClassName(element) {
     if (element.className) {
-      const match = /\bv-rte--text-style-(title|subtitle|heading-1|heading-2|heading-3|heading-4|heading-5|heading-6|paragraph)\b/.exec(element.className);
+      // Match class name with pattern "v-rte--text-style-{textStyle}" or "v-rte-{textStyle}".
+      const match = /\bv-rte-(?:-text-style-)?(title|subtitle|heading-1|heading-2|heading-3|heading-4|heading-5|heading-6|paragraph)\b/.exec(element.className);
       if (match) {
         return match[1];
       }
@@ -2446,131 +2269,311 @@ class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   }
 }
 
-/** Handle image size annotation */
-class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements.
+ */
+class Predicate {
   /**
-   * @inheritDoc
+   * Checks if the given element is a title or subtitle.
+   *
+   * @param {HTMLElement} element The element to check.
+   * @returns {boolean} True if the element is a title or subtitle, false otherwise.
+   */
+  static isTitleOrSubtitle(element) {
+    if (element.nodeName === 'DIV') {
+      const textBlockType = Predicate.textStyleHandler['getTextStyle'](element);
+      return textBlockType === 'title' || textBlockType === 'subtitle';
+    }
+    return false;
+  }
+  /**
+   * Check if the given element is a link element (anchor tag).
+   *
+   * @param {HTMLElement} element The element to check.
+   * @returns {boolean} True if the element is a link element, false otherwise.
+   */
+  static isLinkElement(element) {
+    return element.nodeName === 'A';
+  }
+}
+Predicate.textStyleHandler = new TextStyleAnnotationHandler();
+
+/** Handle link annotation */
+class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.handlers = [
+      new CustomAttributeAnnotationHandler(),
+      new CustomClassAnnotationHandler(),
+      new CustomStyleAnnotationHandler(),
+    ];
+  }
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} - .
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTEImageNode';
+    return targetDto.name === 'RTETextNode';
   }
   /**
    * Handle annotation.
    *
    * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTEImageAnnotations} - Annotation.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  handle(element) {
-    const size = this.getImageSize(element);
-    return size ? { size: size } : {};
+  handle(element, parentAnnotations = {}) {
+    if (parentAnnotations.link)
+      return { link: parentAnnotations.link };
+    return Predicate.isLinkElement(element) ? { link: this.generateLinkAnnotations(element) } : {};
   }
   /**
-   * Determine the image display size based on the width of the current element.
+   * Generate link annotations.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<VegaRichTextImageEditorSizeType>} -Image size, default 'md'.
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTELink} - link annotations.
    */
-  getImageSize(element) {
-    if (element.getAttribute('data-size')) {
-      return element.getAttribute('data-size');
-    }
-    return null;
+  generateLinkAnnotations(element) {
+    const annotations = {
+      href: element.getAttribute('href') || '',
+      groupKey: generateUUID(),
+    };
+    this.handlers.forEach((handler) => {
+      Object.assign(annotations, handler.handle(element));
+    });
+    return annotations;
   }
 }
 
-/** Handle image alt annotation */
-class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/** Handle strike through annotation */
+class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTEImageNode';
+    return targetDto.name === 'RTETextNode';
   }
   /**
    * Handle annotation.
    *
    * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTEImageAnnotations} - Annotation.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  handle(element) {
-    return element.hasAttribute('alt') ? { alt: element.getAttribute('alt') } : {};
+  handle(element, parentAnnotations = {}) {
+    return this.isStrikethrough(element) || parentAnnotations.strikethrough
+      ? { strikethrough: true }
+      : {};
+  }
+  /**
+   * Is strikethrough element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes(STRIKETHROUGH_TEXT_DECORATION) ||
+      element.nodeName === 'S' ||
+      element.nodeName === 'DEL' ||
+      element.classList.contains('v-rte--strikethrough'));
   }
 }
 
-/**
- * Handle inline html annotation
- */
-class InlineHtmlAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  constructor() {
-    super(...arguments);
-    this.customAttributeHandler = new CustomAttributeAnnotationHandler();
-    this.customStyleAnnotationHandler = new CustomStyleAnnotationHandler();
-    this.customClassAnnotationHandler = new CustomClassAnnotationHandler();
-  }
+/** Handle underline annotation */
+class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto, options) {
-    return targetDto.name === 'RTETextNode' && options.autoMatchFormat === false;
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isUnderline(element) || parentAnnotations.underline ? { underline: true } : {};
+  }
+  /**
+   * Is underline element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isUnderline(element) {
+    return (element.style.textDecoration.includes(UNDERLINE_TEXT_DECORATION) ||
+      element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
+      element.classList.contains('v-rte--underline'));
   }
+}
+
+/** Handle image size annotation */
+class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  handle(element, parentAnnotations) {
-    const canHandle = InlineHtmlAnnotationHandler.canHandleTags.includes(element.nodeName);
-    if (canHandle) {
-      const inlineHtml = this.generateInlineHtmlAnnotation(element, Object.assign({}, parentAnnotations));
-      if (inlineHtml) {
-        return { inlineHtml: inlineHtml };
-      }
-    }
-    return {};
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
   }
   /**
-   * Generate inline html annotation.
+   * Handle annotation.
    *
-   * @param {HTMLElement} child - Current element.
-   * @param {VegaRTETextAnnotations} annotations - Current annotations.
-   * @returns {Nullable<VegaInlineHtmlSchema>} - Inline html annotation.
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
    */
-  generateInlineHtmlAnnotation(child, annotations) {
-    let { inlineHtml } = annotations;
-    if (!RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ||
-      (child.childNodes.length === 1 && child.childNodes[0].nodeType !== Node.TEXT_NODE)) {
-      const childInlineHtmlNode = {
-        htmlTag: child.nodeName.toLowerCase(),
-        customAttribute: this.customAttributeHandler.handle(child).customAttribute,
-        customStyle: this.customStyleAnnotationHandler.handle(child).customStyle,
-        customClass: this.customClassAnnotationHandler.handle(child).customClass,
-      };
-      if (!inlineHtml) {
-        inlineHtml = childInlineHtmlNode;
-      }
-      else {
-        let lastChild = inlineHtml;
-        while (lastChild.child &&
-          child.parentNode &&
-          lastChild.child.htmlTag === child.parentNode.nodeName.toLowerCase()) {
-          lastChild = lastChild.child;
-        }
-        lastChild.child = childInlineHtmlNode;
-      }
+  handle(element) {
+    const size = this.getImageSize(element);
+    return size ? { size: size } : {};
+  }
+  /**
+   * Determine the image display size based on the width of the current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRichTextImageEditorSizeType>} -Image size, default 'md'.
+   */
+  getImageSize(element) {
+    if (element.getAttribute('data-size')) {
+      return element.getAttribute('data-size');
     }
-    return inlineHtml ? Object.assign({}, inlineHtml) : null;
+    return null;
+  }
+}
+
+/** Handle image alt annotation */
+class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
+   */
+  handle(element) {
+    return element.hasAttribute('alt') ? { alt: element.getAttribute('alt') } : {};
   }
 }
-InlineHtmlAnnotationHandler.canHandleTags = [
-  'A',
+
+/**
+ * Tags whose direct children are always phrasing (inline) content (P, H1-H6, LI).
+ *
+ * This is spec knowledge from the HTML Living Standard — these grouping-content
+ * elements have a phrasing-content content model and cannot contain block-level
+ * descendants. It cannot be derived from the strategy registry and must be
+ * maintained alongside the HTML spec.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+ */
+const BLOCK_TEXT_CONTAINER_TAGS = new Set([
+  'P',
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'H5',
+  'H6',
+  'LI',
+]);
+/**
+ * Tags with dedicated element-to-DTO block strategies
+ * (P, H1-H6, LI, UL, OL, IMG, CODE).
+ *
+ * HtmlBlockStrategy skips these to avoid double-processing or overriding their
+ * specialized block semantics.
+ *
+ * Why hard-coded: strategies use heterogeneous matching (`tagName ===`,
+ * `matchTextBlockType` via font-size/class, etc.) so there is no single
+ * declarative contract to derive this set from. It must be kept in sync with
+ * the strategies registered in `dto/setup.ts`.
+ *
+ * Intentionally independent of {@link BLOCK_TEXT_CONTAINER_TAGS} — the two
+ * sets encode different concepts (app architecture vs. HTML spec) and must
+ * be maintained separately.
+ */
+const DEDICATED_STRATEGY_TAGS = new Set([
+  'P',
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'H5',
+  'H6',
+  'LI',
+  'UL',
+  'OL',
+  'IMG',
+  'CODE',
+]);
+/**
+ * Tags that are always treated as phrasing (inline) content, even when they
+ * also appear in {@link DEDICATED_STRATEGY_TAGS} (CODE).
+ * A tag in this set overrides the dedicated-strategy skip in HtmlBlockStrategy.
+ *
+ * Mix of HTML5 spec phrasing-content elements (BR, CODE, A) and
+ * RTE-internal custom elements (VEGA-RICH-TEXT-LINK-EDITOR).
+ */
+const ALWAYS_INLINE_TAGS = new Set(['BR', 'VEGA-RICH-TEXT-LINK-EDITOR', 'CODE', 'A']);
+/**
+ * Tags whose content model requires each child to be a distinct block-level
+ * element (table model and definition list).
+ *
+ * TABLE expects CAPTION/THEAD/TBODY/TFOOT/TR; TR expects TH/TD;
+ * THEAD/TBODY/TFOOT expect TR; DL expects DT/DD.
+ *
+ * Used by HtmlBlockStrategy to prevent text-only children (e.g. CAPTION,
+ * TH, TD) from being treated as inline — they must become html-blocks so
+ * the table structure round-trips correctly.
+ *
+ * Note: COLGROUP is intentionally excluded. Its only permitted child is the
+ * void element COL, which can never produce text-node children, so the
+ * text-only heuristic in HtmlBlockStrategy can never fire for a COLGROUP
+ * parent.
+ *
+ * @see https://html.spec.whatwg.org/multipage/tables.html#the-table-element
+ * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
+ */
+const STRUCTURED_CONTAINER_TAGS = new Set([
+  'TABLE',
+  'THEAD',
+  'TBODY',
+  'TFOOT',
+  'TR',
+  'DL',
+]);
+/**
+ * Formatting phrasing-content elements that CAN remain inline even when empty.
+ *
+ * Any element NOT in this set (DIV, SECTION, ARTICLE, custom elements, etc.)
+ * is treated as a block separator. Phrasing content is a closed, finite set
+ * per the HTML Living Standard, making an allowlist safer than blocklisting
+ * block containers (which is open-ended — custom elements default to block).
+ *
+ * Intentionally excludes:
+ * - BR, CODE, A, VEGA-RICH-TEXT-LINK-EDITOR → handled by {@link ALWAYS_INLINE_TAGS}
+ * - P, H1-H6, LI, UL, OL, IMG → handled by {@link DEDICATED_STRATEGY_TAGS}
+ * - VIDEO, AUDIO, EMBED → embedded content that carries media even when empty;
+ *   must be treated as block-level, not as inline formatting artifacts
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+ */
+const PHRASING_CONTENT_TAGS = new Set([
   'ABBR',
-  'AUDIO',
   'B',
   'BDI',
   'BDO',
   'CITE',
-  'CODE',
   'DEL',
   'DFN',
-  'EMBED',
   'EM',
   'I',
   'INS',
@@ -2581,6 +2584,7 @@ InlineHtmlAnnotationHandler.canHandleTags = [
   'PROGRESS',
   'Q',
   'S',
+  'SAMP',
   'SMALL',
   'SPAN',
   'STRONG',
@@ -2589,8 +2593,89 @@ InlineHtmlAnnotationHandler.canHandleTags = [
   'TIME',
   'U',
   'VAR',
-  'VIDEO',
-];
+]);
+/**
+ * Returns true when the element is a direct child of a block text container
+ * (P, H1-H6, LI), meaning it must be treated as phrasing content regardless
+ * of its own DOM structure.
+ *
+ * @param {HTMLElement} element - Element to test.
+ * @returns {boolean} True if the element is inside a block text container.
+ */
+function isInBlockTextContext(element) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return BLOCK_TEXT_CONTAINER_TAGS.has(element.parentElement.nodeName);
+}
+
+/**
+ * Handle inline html annotation
+ */
+class InlineHtmlAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.customAttributeHandler = new CustomAttributeAnnotationHandler();
+    this.customStyleAnnotationHandler = new CustomStyleAnnotationHandler();
+    this.customClassAnnotationHandler = new CustomClassAnnotationHandler();
+  }
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto, options) {
+    return targetDto.name === 'RTETextNode' && options.autoMatchFormat === false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(element, parentAnnotations) {
+    // Skip block-level dedicated tags (P, H1-H6, LI, UL, OL, IMG).
+    // Tags in ALWAYS_INLINE_TAGS (CODE, A) are exempt and still produce inlineHtml annotations.
+    if (DEDICATED_STRATEGY_TAGS.has(element.nodeName) && !ALWAYS_INLINE_TAGS.has(element.nodeName)) {
+      return {};
+    }
+    const inlineHtml = this.generateInlineHtmlAnnotation(element, Object.assign({}, parentAnnotations));
+    if (inlineHtml) {
+      return { inlineHtml: inlineHtml };
+    }
+    return {};
+  }
+  /**
+   * Generate inline html annotation.
+   *
+   * @param {HTMLElement} child - Current element.
+   * @param {VegaRTETextAnnotations} annotations - Current annotations.
+   * @returns {Nullable<VegaInlineHtmlSchema>} - Inline html annotation.
+   */
+  generateInlineHtmlAnnotation(child, annotations) {
+    let { inlineHtml } = annotations;
+    const hasElementChildren = Array.from(child.childNodes).some((c) => c.nodeType === Node.ELEMENT_NODE);
+    if (!RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) || hasElementChildren) {
+      const childInlineHtmlNode = Object.assign(Object.assign({ htmlTag: child.nodeName.toLowerCase() }, (hasElementChildren ? { groupId: generateUUID() } : {})), { customAttribute: this.customAttributeHandler.handle(child).customAttribute, customStyle: this.customStyleAnnotationHandler.handle(child).customStyle, customClass: this.customClassAnnotationHandler.handle(child).customClass });
+      if (!inlineHtml) {
+        inlineHtml = childInlineHtmlNode;
+      }
+      else {
+        inlineHtml = this.appendToInlineHtmlChain(inlineHtml, childInlineHtmlNode, child.parentNode);
+      }
+    }
+    return inlineHtml ? Object.assign({}, inlineHtml) : null;
+  }
+  /**
+   * Immutably appends `toAppend` at the correct position in the chain — the
+   * deepest node whose `child.htmlTag` still matches `parentNode.nodeName`.
+   * Each level is reconstructed via spread so the original chain is never mutated.
+   *
+   * @param {VegaInlineHtmlSchema} node - Current chain node.
+   * @param {VegaInlineHtmlSchema} toAppend - Node to append at the tail.
+   * @param {ParentNode | null} parentNode - DOM parent of the element being processed.
+   * @returns {VegaInlineHtmlSchema} A new chain with `toAppend` inserted.
+   */
+  appendToInlineHtmlChain(node, toAppend, parentNode) {
+    if (node.child && parentNode && node.child.htmlTag === parentNode.nodeName.toLowerCase()) {
+      return Object.assign(Object.assign({}, node), { child: this.appendToInlineHtmlChain(node.child, toAppend, parentNode) });
+    }
+    return Object.assign(Object.assign({}, node), { child: toAppend });
+  }
+}
 
 /** Html element to annotations generator */
 class HtmlElementToAnnotationGenerator {
@@ -2636,7 +2721,12 @@ class HtmlElementToAnnotationGenerator {
    * @returns {V} Generated annotations.
    */
   generate(targetDto, element, options = { autoMatchFormat: true }) {
-    const isLinkElement = element.tagName === 'A';
+    if (options && options.filterInlineStyles) {
+      RTEFilterStylesStrategyRegistry.executeTheStrategyRefillAction(targetDto.name, element);
+    }
+    // Guard against <a> wrapping block content (e.g. <a><video></a>), which is processed as an
+    // html-block (targetDto !== RTETextNode) — link-only mode should not apply in that case.
+    const isLinkElement = Predicate.isLinkElement(element) && targetDto.name === 'RTETextNode';
     const annotations = this.handlers
       .filter((handler) => !options.autoMatchFormat && isLinkElement ? handler instanceof LinkAnnotationHandler : true)
       .filter((handler) => element.nodeType !== Node.TEXT_NODE &&
@@ -2767,13 +2857,17 @@ class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    */
   canHandle(elementsArray, currentIndex, options) {
     const element = elementsArray[currentIndex];
-    // - div + img should be handled by RTEImageBlock
-    const isCustomContainer = element.nodeName === 'DIV'
-      ? element.childNodes.length > 0 && element.childNodes[0].nodeName !== 'IMG'
-      : true;
+    if (element.nodeType === Node.TEXT_NODE || this.isInlineTagWithoutBlockChildren(element, options)) {
+      return 0;
+    }
+    // Skip dedicated-strategy tags unless all children are block-level embedded
+    // elements (e.g. <p><video></p>), in which case fall back to html-block.
+    if (DEDICATED_STRATEGY_TAGS.has(element.nodeName) && !this.shouldFallBackToHtmlBlock(element)) {
+      return 0;
+    }
     return !options.autoMatchFormat &&
-      isCustomContainer &&
-      HtmlBlockStrategy.canHandleTags.includes(elementsArray[currentIndex].nodeName)
+      this.isCustomHtmlContainer(element) &&
+      !Predicate.isTitleOrSubtitle(element)
       ? 1
       : 0;
   }
@@ -2799,6 +2893,89 @@ class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   shouldProceedToElementChildren() {
     return true;
   }
+  /**
+   * Returns true for elements that should be treated as inline content even if they have no element children (e.g. <span>text</span>).
+   * This includes any element in a block text context (P, H1-H6, LI) and any element with text-node children but no element-node children.
+   *
+   * In raw-HTML mode (autoMatchFormat: false), the text-only heuristic only
+   * applies to elements whose parent is itself a text-only wrapper (e.g.
+   * {@code <div><span>Title</span></div>}). Structural children of non-text
+   * containers (TABLE → CAPTION, TR → TH/TD, etc.) skip this heuristic so
+   * they reach {@link isCustomHtmlContainer} and become html-blocks.
+   *
+   * @param {HTMLElement} element - Element to check.
+   * @param {VegaRTETransformOptions} options - Transform options.
+   * @returns {boolean} True if the element should be treated as inline content.
+   */
+  isInlineTagWithoutBlockChildren(element, options) {
+    if (isInBlockTextContext(element)) {
+      // Empty elements that are not recognized inline elements should not
+      // be forced inline — they may represent block-level embedded content
+      // (e.g. <video src="...">, <audio>, <iframe src="...">).
+      if (element.childNodes.length === 0 &&
+        element.textContent === '' &&
+        !ALWAYS_INLINE_TAGS.has(element.nodeName) &&
+        !PHRASING_CONTENT_TAGS.has(element.nodeName)) {
+        return false;
+      }
+      return true;
+    }
+    const childNodes = Array.from(element.childNodes);
+    const isTextOnly = !childNodes.some((child) => child.nodeType === Node.ELEMENT_NODE) &&
+      childNodes.some((child) => child.nodeType === Node.TEXT_NODE);
+    if (!isTextOnly) {
+      return false;
+    }
+    // In raw-HTML mode, a text-only element is inline only if:
+    // 1. Its parent is not a structured container (TABLE, TR, …)
+    // 2. The element itself is phrasing content (SPAN, EM, …)
+    // Non-phrasing text-only elements (SUMMARY, FIGCAPTION, OPTION, SVG TEXT,
+    // etc.) must fall through to become html-blocks.
+    if (options.autoMatchFormat === false) {
+      if (STRUCTURED_CONTAINER_TAGS.has(element.parentElement.nodeName))
+        return false; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+      return PHRASING_CONTENT_TAGS.has(element.nodeName) || ALWAYS_INLINE_TAGS.has(element.nodeName);
+    }
+    return true;
+  }
+  /**
+   * Returns true when a dedicated-strategy element should fall back to html-block
+   * because all its children are non-text, non-inline, non-dedicated elements
+   * — indicating purely block-level embedded content that the dedicated text-block
+   * strategy cannot represent.
+   *
+   * @param {HTMLElement} element - The dedicated-strategy element to check.
+   * @returns {boolean} True when the element should be treated as html-block.
+   */
+  shouldFallBackToHtmlBlock(element) {
+    const childNodes = Array.from(element.childNodes);
+    if (childNodes.length === 0)
+      return false;
+    // List items are structural children whose dedicated strategies manage
+    // both block and inline children independently — never override them.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const parentTag = element.parentElement.nodeName;
+    if (parentTag === 'UL' || parentTag === 'OL')
+      return false;
+    return childNodes.every((child) => child.nodeType === Node.ELEMENT_NODE &&
+      child.textContent === '' &&
+      !ALWAYS_INLINE_TAGS.has(child.nodeName) &&
+      !PHRASING_CONTENT_TAGS.has(child.nodeName));
+  }
+  /**
+   * Returns true for elements that should be treated as html containers.
+   * A DIV is only a valid container when its first child is not an IMG
+   * (IMG children are handled by the image strategy instead).
+   *
+   * @param {HTMLElement} element - Element to check.
+   * @returns {boolean} True if the element qualifies as a html container.
+   */
+  isCustomHtmlContainer(element) {
+    if (element.nodeName !== 'DIV') {
+      return true;
+    }
+    return element.childNodes.length > 0 && element.childNodes[0].nodeName !== 'IMG';
+  }
   /**
    * Generate HTML block DTO from an HTML element.
    *
@@ -2816,43 +2993,6 @@ class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
     };
   }
 }
-HtmlBlockStrategy.canHandleTags = [
-  'ADDRESS',
-  'ARTICLE',
-  'ASIDE',
-  'BLOCKQUOTE',
-  'BUTTON',
-  'CAPTION',
-  'COL',
-  'COLGROUP',
-  'DIV',
-  'DD',
-  'DETAILS',
-  'DL',
-  'DT',
-  'FIELDSET',
-  'FIGCAPTION',
-  'FIGURE',
-  'FOOTER',
-  'FORM',
-  'HEADER',
-  'HR',
-  'HX',
-  'INPUT',
-  'LEGEND',
-  'MAIN',
-  'NAV',
-  'PRE',
-  'SECTION',
-  'SUMMARY',
-  'TABLE',
-  'TBODY',
-  'TD',
-  'TFOOT',
-  'TH',
-  'THEAD',
-  'TR',
-];
 
 /** Transform ul element to list block DTO */
 class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
@@ -3444,19 +3584,13 @@ class SpanImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbs
 /** Transform continue inline block elements to text block DTO */
 class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
+   * @inheritDoc
    */
-  canHandle(elementsArray, currentIndex) {
+  canHandle(elementsArray, currentIndex, options) {
     let count = 0;
     for (let i = currentIndex; i < elementsArray.length; i++) {
       const element = elementsArray[i];
-      if (element.nodeType === Node.TEXT_NODE ||
-        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
-          !(element.textContent === '' && element.querySelector('IMG')))) {
+      if (this.isInlineCandidate(element, options)) {
         count++;
       }
       else {
@@ -3516,14 +3650,88 @@ class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstra
         return null;
     }
   }
+  /**
+   * Check if the element is an inline candidate to be included in the text block.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {boolean} - Whether the element is an inline candidate.
+   */
+  isInlineCandidate(element, options) {
+    if (element.nodeType === Node.TEXT_NODE)
+      return true;
+    if (ALWAYS_INLINE_TAGS.has(element.nodeName))
+      return true;
+    if (this.isDedicatedBlockTag(element.nodeName))
+      return false;
+    if (options.autoMatchFormat === false && isInBlockTextContext(element))
+      return true;
+    return this.isInlineLeafOrWrapper(element);
+  }
+  /**
+   * Returns true when the tag has a dedicated block strategy (excludes inline annotation tags CODE and A).
+   *
+   * @param {string} nodeName - The node name to check.
+   * @returns {boolean} - Whether the tag is a dedicated block tag.
+   */
+  isDedicatedBlockTag(nodeName) {
+    return DEDICATED_STRATEGY_TAGS.has(nodeName) && !ALWAYS_INLINE_TAGS.has(nodeName);
+  }
+  /**
+   * Returns true for empty elements, text-only elements, or elements whose entire
+   * descendant tree contains no block-level elements (e.g. {@code <u><i><b>text</b></i></u>}).
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Whether the element is an inline leaf or wrapper.
+   */
+  isInlineLeafOrWrapper(element) {
+    if (element.childNodes.length === 0) {
+      // An empty element is inline only if it is a known HTML phrasing-content
+      // element (SPAN, EM, STRONG, …). Block containers (DIV, SECTION, …)
+      // and unknown/custom elements default to block separators.
+      return PHRASING_CONTENT_TAGS.has(element.nodeName);
+    }
+    if (this.isTextOnlyElement(element)) {
+      return PHRASING_CONTENT_TAGS.has(element.nodeName) || ALWAYS_INLINE_TAGS.has(element.nodeName);
+    }
+    return this.hasOnlyInlineDescendants(element);
+  }
+  /**
+   * Returns true when the element has text-node children but no element children.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Whether the element contains only text nodes.
+   */
+  isTextOnlyElement(element) {
+    const childNodes = Array.from(element.childNodes);
+    return (!childNodes.some((child) => child.nodeType === Node.ELEMENT_NODE) &&
+      childNodes.some((child) => child.nodeType === Node.TEXT_NODE));
+  }
+  /**
+   * Returns true if the element's subtree contains only inline formatting wrappers.
+   * Instead of maintaining a hard coded tag allowlist, the check derives from:
+   *  1. {@link DEDICATED_STRATEGY_TAGS} — rejects known block/media tags
+   *  2. Void-element check — elements with no child nodes (INPUT, COL, HR, …)
+   *     are replaced/embedded content, not formatting wrappers
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @returns {boolean} True if the element has no block-level descendants.
+   */
+  hasOnlyInlineDescendants(element) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children[i];
+      if (this.isDedicatedBlockTag(child.nodeName))
+        return false;
+      // An empty element is not a formatting wrapper — it is likely a void/embedded
+      // element (INPUT, HR, COL, empty SPAN) that acts as a block separator.
+      if (!child.hasChildNodes())
+        return false;
+      if (!this.hasOnlyInlineDescendants(child))
+        return false;
+    }
+    return true;
+  }
 }
-ContinueInlineToRTETextBlockStrategy.canHandleTags = [
-  ...InlineHtmlAnnotationHandler.canHandleTags,
-  'CODE',
-  'A',
-  'VEGA-RICH-TEXT-LINK-EDITOR',
-  'BR',
-];
 
 /**
  * Class to handle text node elements and convert them to text node DTOs
@@ -3624,7 +3832,7 @@ class InlineElementToTextNodeStrategy extends ElementToTextNodeStrategy {
       // For empty dom, there will be no internal iteration, we need to handle it directly here.
       // Example: <span></span>, <video src='...'></video>
       const emptyNodeAnnotations = disableAutoMatchFormat
-        ? cleanObject(Object.assign(Object.assign({}, (RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ? curAnnotations : {})), { inlineHtml: curAnnotations.inlineHtml, plainText: isNonNullable(curAnnotations.inlineHtml) }))
+        ? cleanObject(Object.assign(Object.assign({}, (RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ? curAnnotations : {})), { inlineHtml: curAnnotations.inlineHtml }))
         : curAnnotations;
       return Object.assign({}, this.generateTextNode('', emptyNodeAnnotations));
     }
@@ -3632,80 +3840,39 @@ class InlineElementToTextNodeStrategy extends ElementToTextNodeStrategy {
 }
 
 /**
- * Abstract strategy class for filtering default styles in the rich text editor.
- * Concrete strategies define which styles to strip via `stylesToBeFiltered`.
- *
- * This base is shared by two kinds of concrete strategies:
- *   1. Block/node output strategies – filter inline styles when converting DTO → HTML.
- *   2. Annotation parsing strategies – strip redundant defaults when converting HTML → DTO.
+ * Filter styles strategy for image node, which defines the styles to be filtered and the conditions for filtering and refilling styles for image nodes.
  */
-class RTEFilterStylesStrategy {
+class ImageFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = ImageAnnotation.getDefaultStyles();
+    this.elementTagName = 'img';
+  }
   /**
-   * Whether this strategy should always filter, regardless of `autoMatchFormat`.
-   * Override to `true` when the filtered styles are always emitted as inline
-   * styles by the DTO (e.g. image `vertical-align`), so stripping them from
-   * `customStyle` is always safe.
+   * Used for the filterAnnotations method.
    *
-   * Defaults to `false` – the strategy only runs when `autoMatchFormat` is enabled.
-   *
-   * @returns {boolean} Whether filtering should always apply.
+   * @returns {boolean} Always `true` — image defaults are emitted as inline styles.
    */
   get alwaysFilter() {
-    return false;
+    return true;
   }
   /**
-   * Removes matched default styles from the `customStyle` property of the given annotations object.
-   * If all custom styles are defaults, the `customStyle` key is deleted entirely.
-   *
-   * @param {VegaRTEAnnotations} annotations - The annotations object (mutated in place).
-   * @returns {VegaRTEAnnotations} The same annotations reference.
+   * @inheritDoc
    */
-  filterAnnotations(annotations) {
-    const customStyle = annotations.customStyle;
-    if (!customStyle) {
-      return annotations;
-    }
-    this.extractAndDeleteMatchedStyles(customStyle);
-    if (Object.keys(customStyle).length === 0) {
-      delete annotations.customStyle;
-    }
-    return annotations;
+  canFilter(blockOrNodeInstance) {
+    return Predicate$1.isImageNode(blockOrNodeInstance);
   }
   /**
-   * Removes configured default style properties from the target styles object.
-   * Only properties whose value matches the configured default exactly are deleted.
-   *
-   * @param {Nullable<RTEFilterStyles>} styles - The styles object to mutate.
-   * @returns {boolean} `true` if at least one style was extracted.
+   * @inheritDoc
    */
-  extractAndDeleteMatchedStyles(styles) {
-    let wasExtracted = false;
-    if (styles) {
-      const defaults = this.stylesToBeFiltered;
-      const styleKeys = Object.keys(defaults);
-      for (const key of styleKeys) {
-        if (styles[key] === defaults[key]) {
-          delete styles[key];
-          wasExtracted = true;
-        }
-      }
-    }
-    return wasExtracted;
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
   }
-}
-
-/**
- * Filters the default ImageAnnotation base styles (verticalAlign) from
- * customStyle when parsing an RTEImageNode.
- */
-class ImageFilterStylesStrategy extends RTEFilterStylesStrategy {
-  constructor() {
-    super(...arguments);
-    this.stylesToBeFiltered = ImageAnnotation.getDefaultStyles();
-  }
-  /** @returns {boolean} Always `true` — image defaults are emitted as inline styles. */
-  get alwaysFilter() {
-    return true;
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
   }
 }
 
@@ -3717,6 +3884,29 @@ class ListBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
     super(...arguments);
     this.stylesToBeFiltered = ListAnnotation.getDefaultStyles();
+    this.elementTagName = 'ol,ul';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate$1.isListBlock(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return Predicate$1.isListBlock(blockOrNodeClassName) && element.matches(this.elementTagName);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    const selector = this.elementTagName
+      .split(',')
+      .map((tag) => `.${RTEFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${tag.trim()}`)
+      .join(', ');
+    return `${selector} { ${this.convertStylesMapToCssText(this.stylesToBeFiltered)} }`;
   }
 }
 
@@ -3728,7 +3918,44 @@ class ListBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
 class ListItemBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
     super(...arguments);
-    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles('paragraph') || {};
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles('paragraph');
+    this.elementTagName = 'li';
+    this.headingOrTitleClassNamePattern = /^v-rte-(h[1-6]|title|subtitle)$/;
+  }
+  /**
+   * Check the important font-size for list item block are default styles, and the block is a list item block.
+   *
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    const styles = blockOrNodeInstance.getStyles();
+    const isDefaultStyles = !styles.fontSize ||
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']);
+    return Predicate$1.isListItemBlock(blockOrNodeInstance.constructor.name) && isDefaultStyles;
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      this.isElementNotHeadingOrTitle(element));
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName);
+  }
+  /**
+   * Check the list item element does not have heading or title class names.
+   *
+   * @param {HTMLElement} element - The list item element to check.
+   * @returns {boolean} - True if the element does not have heading or title class names, false otherwise.
+   */
+  isElementNotHeadingOrTitle(element) {
+    const classNames = element.className.split(' ');
+    return !classNames.some((className) => this.headingOrTitleClassNamePattern.test(className.trim()));
   }
 }
 
@@ -3771,13 +3998,13 @@ class AlignmentFilterStylesStrategy extends RTEFilterStylesStrategy {
 }
 
 /**
- * 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.
  */
 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,
@@ -3793,34 +4020,33 @@ class CodeFilterStylesStrategy extends RTEFilterStylesStrategy {
     }
     return super.filterAnnotations(annotations);
   }
-}
-
-/**
- * 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.
- */
-class LinkFilterStylesStrategy extends RTEFilterStylesStrategy {
-  constructor() {
-    super(...arguments);
-    this.stylesToBeFiltered = LinkGroupAnnotation.getDefaultStyles();
+  /**
+   * 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$1.isCodeNode(blockOrNodeInstance);
   }
   /**
-   * Filter default link styles from `link.customStyle` in annotations.
+   * Check if the node is a text node and it is a code node.
    *
-   * @param {VegaRTEAnnotations} annotations - The annotations to filter.
-   * @returns {VegaRTEAnnotations} The same annotations reference with link.customStyle cleaned up.
+   * @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.
    */
-  filterAnnotations(annotations) {
-    const link = annotations.link;
-    if (!(link === null || link === void 0 ? void 0 : link.customStyle)) {
-      return annotations;
-    }
-    this.extractAndDeleteMatchedStyles(link.customStyle);
-    if (Object.keys(link.customStyle).length === 0) {
-      delete link.customStyle;
-    }
-    return annotations;
+  canRefill(blockOrNodeClassName, element) {
+    return Predicate$1.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' }))} }`;
   }
 }
 
@@ -3912,6 +4138,244 @@ class TextFormatFilterStylesStrategy extends RTEFilterStylesStrategy {
   }
 }
 
+/**
+ *
+ */
+class ParagraphFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles('paragraph');
+    this.type = 'paragraph';
+    this.elementTagName = 'p';
+  }
+  /**
+   * Don't run the filterAnnotations for paragraph heading, title, subtitle, list heading item, list title item, list subtitle item.
+   * Already handle it in html-element-to-annotation-generator.ts#removeTextStyleDefaultsFromCustomStyle
+   *
+   * @inheritDoc
+   */
+  filterAnnotations(annotations) {
+    return annotations;
+  }
+  /**
+   * Determines whether the dto instance is text block and has the same type as the strategy's configured type.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} - True if the instance is a text block with the same type as the strategy, false otherwise.
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isTextBlock(blockOrNodeInstance.constructor.name) &&
+      blockOrNodeInstance.type === this.type);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    const selector = this.classNameToBeAdded
+      ? `.${this.classNameToBeAdded}`
+      : this.elementTagName;
+    return Predicate$1.isTextBlock(blockOrNodeClassName) && element.matches(selector);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}
+
+/**
+ * The HeadingFilterStylesStrategy class is responsible for filtering and refilling styles for heading text blocks (h1 to h6) in the rich text editor.
+ */
+class HeadingFilterStylesStrategy extends ParagraphFilterStylesStrategy {
+  constructor(level) {
+    super();
+    this.type = 'heading-1';
+    this.elementTagName = 'h1';
+    this.type = `heading-${level}`;
+    this.elementTagName = `h${level}`;
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles(this.type);
+  }
+}
+
+/**
+ * The TitleFilterStylesStrategy class is responsible for filtering and refilling styles for title and subtitle text blocks in the rich text editor.
+ */
+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);
+  }
+}
+
+/**
+ * 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.
+ */
+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$1.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$1.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',
+];
+
+/**
+ * Filters the default heading styles from customStyle when parsing an RTEListItemBlock that is supposed to be a heading.
+ */
+class ListHeadingItemBlockFilterStylesStrategy extends HeadingFilterStylesStrategy {
+  constructor(level) {
+    super(level);
+    this.classNameToBeAdded = `v-rte-h${level}`;
+    this.elementTagName = 'li';
+  }
+  /**
+   * Check the important font-size and line-height for list item block are default styles, and the block is a list item block.
+   *
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      element.classList.contains(this.classNameToBeAdded));
+  }
+}
+
+/**
+ * Filters the default title/subtitle styles from customStyle when parsing an RTEListItemBlock that is supposed to be a title/subtitle.
+ */
+class ListTitleItemBlockFilterStylesStrategy extends TitleFilterStylesStrategy {
+  constructor(type) {
+    super(type);
+    this.classNameToBeAdded = `v-rte-${type}`;
+    this.elementTagName = 'li';
+  }
+  /**
+   * Check the important font-size and line-height for list item block are default styles, and the block is a list item block.
+   *
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      element.classList.contains(this.classNameToBeAdded));
+  }
+}
+
 /**
  * Register and setup the default DTO classes and their basic action strategies.
  */
@@ -3947,25 +4411,46 @@ ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new SpanImageToR
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaImageToRTEImageBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ImgToRTEImageBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new InlineBlockToRTETextBlockStrategy());
-ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
-ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new LiToRTEListItemBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ULNotLiChildToRTEListItemBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new OlToRTEListBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new UlToRTEListBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new HtmlBlockStrategy());
+//!important: Code block strategies must be registered after HtmlBlockStrategy because registerElementToBlockStrategy uses unshift, giving later registrations higher priority.
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new InlineElementToTextNodeStrategy());
 ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new PlainTextToTextNodeStrategy());
 // Register filter styles strategies (remove redundant default styles during HTML → DTO conversion)
-RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new AlignmentFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new AlignmentFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new AlignmentFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new LinkFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TextFormatFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new ParagraphFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('subtitle'));
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TitleHeadingNodeFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new CodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new LinkFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlock.name, new CodeBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlockNode.name, new CodeBlockNodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('subtitle'));
 
 /**
  * StylePreservator handles CSP-compliant style management by temporarily converting
@@ -4292,6 +4777,15 @@ class VegaRTEContent {
       .filter(isNonNullable);
     return new VegaRTEContent(blocks);
   }
+  /**
+   * Generates the content style file for the rich text editor based on the registered filter styles strategies.
+   *
+   * @param {VegaRTEGenerateStyleOptions} options - Options for generating the content style file.
+   * @returns {string} The html template style text.
+   */
+  static generateContentStyles(options) {
+    return RTEFilterStylesStrategyRegistry.generateAllStylesContent(options === null || options === void 0 ? void 0 : options.enableFontImports);
+  }
   /**
    * Clones the content state.
    *
@@ -4314,18 +4808,20 @@ class VegaRTEContent {
   /**
    * Converts the content state to HTML.
    *
-   * @deprecated The [`options`]{@link options} parameter is deprecated and will be removed in the future.
-   * @param {VegaRTETransformOptions} [options] - Deprecated. Optional rendering context (currently unused).
+   * @param {VegaRTETransformOptions} [options] - The conversion options.
    * @returns {string} The HTML representation of the content state.
    */
   toHtml(options) {
-    if (options) {
-      LogUtility.warn(`The 'options' parameter in toHtml method is deprecated and will be removed in the future.`);
+    if (options &&
+      (isNonNullable(options.autoMatchFormat) || isNonNullable(options.skipCustomAnnotations))) {
+      LogUtility.warn(`The 'options' parameter's properties 'autoMatchFormat' and 'skipCustomAnnotations' in toHtml method are deprecated and will be removed in the future.`);
     }
     if (this.isEmpty()) {
       return '';
     }
-    return this.children.map((block) => block.toHtml()).join('');
+    return this.children
+      .map((block) => block.toHtml({ filterInlineStyles: options === null || options === void 0 ? void 0 : options.filterInlineStyles }))
+      .join('');
   }
   /**
    * Checks if the content state is empty.
@@ -4333,7 +4829,14 @@ class VegaRTEContent {
    * @returns {boolean} True if the content state is empty, false otherwise.
    */
   isEmpty() {
-    return this.children.length === 0 || (this.children.length === 1 && !this.children[0].isNotEmpty());
+    if (this.children.length === 0) {
+      return true;
+    }
+    if (this.children.length === 1) {
+      const block = this.children[0];
+      return !block.isNotEmpty();
+    }
+    return false;
   }
   /**
    * Internal method to add the block item, remove the block item