@heartlandone/vega 2.80.0 → 2.82.0

package/dist/esm/{code-block-7d6f231b.js → code-block-b8be290a.js}

@@ -1,13 +1,14 @@
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
-import { d as VegaInternalRichTextEditorFlushChanges, e as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-70bd893d.js';
-import { c as camelToDashCase } from './string-a953eafc.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
+import { d as VegaInternalRichTextEditorFlushChanges, e as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-194bac82.js';
+import { d as dashCaseToCamel, c as camelToDashCase } from './string-a953eafc.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { i as isNonNullable } from './type-guard-23a08026.js';
+import { i as isNonNullable } from './type-guard-152070e9.js';
+import { T as TypographyUrls } from './typography-396de03f.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-82e5c1c6.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-e9a6b097.js';
 import { c as cleanObject } from './object-0c277f57.js';
-import { f as findParent } from './ui-ba5a4758.js';
+import { f as findParent } from './ui-b7600a48.js';
 
 var InternalAnnotationTypeEnum;
 (function (InternalAnnotationTypeEnum) {
@@ -160,6 +161,405 @@ class ModifyContentAction {
   }
 }
 
+/**
+ * Creates a style map from the inline styles of an HTML element. This function extracts the 'style' attribute from the given element.
+ *
+ * @param {HTMLElement} element The HTML element from which to extract inline styles.
+ * @returns {AnnotationStyle} An object representing the custom style annotations.
+ */
+function createStyleMapFromElement(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)), {});
+}
+
+/**
+ * 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.
+ */
+class RTEFilterStylesStrategy {
+  constructor() {
+    /**
+     * The class name to be added to the element if the styles are successfully filtered. This should be defined in the concrete implementation of the strategy if needed.
+     * After the class name is added to the element, it will be removed in the next refill process to avoid redundant class names.
+     * The class name will only be added when the styles are successfully extracted, which means the expected styles are present in the full styles object and have been deleted from it.
+     */
+    this.classNameToBeAdded = '';
+  }
+  /**
+   * 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.
+   */
+  filterAnnotations(annotations) {
+    const customStyle = annotations.customStyle;
+    if (!customStyle) {
+      return annotations;
+    }
+    this.extractAndDeleteMatchedStyles(customStyle);
+    if (Object.keys(customStyle).length === 0) {
+      delete annotations.customStyle;
+    }
+    return annotations;
+  }
+  /**
+   * Filters and deletes the matched styles from the full styles object, add the corresponding class name if necessary, and returns the result.
+   *
+   * @param {RTEFilterStyles} fullStyles - The full set of styles to filter.
+   * @param {string[]} classNames - The class names to consider.
+   * @returns {RTEFilterInlineStylesResult} The filtered styles and class names.
+   */
+  filterAndDeleteStyles(fullStyles, classNames) {
+    const classSet = new Set(classNames);
+    const shouldAddClass = this.extractAndDeleteMatchedStyles(fullStyles);
+    if (shouldAddClass && this.classNameToBeAdded) {
+      classSet.add(this.classNameToBeAdded);
+    }
+    return {
+      styles: fullStyles,
+      classNames: Array.from(classSet),
+    };
+  }
+  /**
+   * Refills the external styles for a given HTML element based on a matched external style rule.
+   *
+   * @param {HTMLElement} element - The HTML element to apply the styles to. The element's existing styles will be merged with the matched rule's styles, and the matched class name will be removed from the element.
+   */
+  refillStyles(element) {
+    if (this.classNameToBeAdded) {
+      element.classList.remove(this.classNameToBeAdded);
+    }
+    const existingStyles = createStyleMapFromElement(element);
+    const mergedStyles = Object.assign(Object.assign({}, this.stylesToBeFiltered), existingStyles);
+    const cssText = Object.entries(Object.assign({}, mergedStyles))
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+    element.setAttribute('style', cssText);
+  }
+  /**
+   * Determines if the strategy can filter the given block or node instance.
+   * Return false by default, concrete strategies should override this method to specify the filtering logic based on the block or node instance's properties, such as its type or annotations.
+   *
+   * @param {RTEBlock | RTENode} _blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} True if the strategy can filter the instance, false otherwise.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canFilter(_blockOrNodeInstance) {
+    return false;
+  }
+  /**
+   * Determines if the strategy can refill styles for the given block or node class name and element.
+   * Return false by default to avoid unnecessary refill attempts, concrete strategies should override this method to specify the refilling logic based on the class name and element properties, such as the presence of certain attributes or existing styles.
+   *
+   * @param {string} _blockOrNodeClassName - The class name of the block or node.
+   * @param {HTMLElement} _element - The HTML element to apply the styles to.
+   * @returns {boolean} True if the strategy can refill styles, false otherwise.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canRefill(_blockOrNodeClassName, _element) {
+    return false;
+  }
+  /**
+   * Generates the CSS text to be applied to the element based on the strategy's styles to filter. This method should be implemented in the concrete strategy class to return the appropriate CSS text for the styles it handles.
+   * Return an empty string by default to avoid applying any styles when the method is not implemented in a concrete strategy.
+   *
+   * @returns {string} The CSS text to be applied to the element.
+   */
+  toCssText() {
+    return '';
+  }
+  /**
+   * 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.
+   *
+   * Defaults to `false` – the strategy only runs when `autoMatchFormat` is enabled.
+   * Used before invoke the filterAnnotations method.
+   *
+   * @returns {boolean} Whether filtering should always apply.
+   */
+  get alwaysFilter() {
+    return false;
+  }
+  /**
+   * 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.
+   */
+  extractAndDeleteMatchedStyles(styles) {
+    let wasExtracted = false;
+    const defaults = this.stylesToBeFiltered;
+    if (styles && defaults) {
+      const styleKeys = Object.keys(defaults);
+      for (const key of styleKeys) {
+        if (styles[key] === defaults[key]) {
+          delete styles[key];
+          wasExtracted = true;
+        }
+      }
+    }
+    return wasExtracted;
+  }
+  /**
+   * Converts the styles map to a CSS text string.
+   *
+   * @param {string} tagName The HTML tag name.
+   * @param {string} [className] The optional class name.
+   * @returns {string} The CSS text string.
+   */
+  buildCssTextForStyles(tagName, className) {
+    const selector = `.${RTEFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME}` +
+      (className ? ` .${className}` : ` ${tagName}`);
+    const styles = Object.entries(this.stylesToBeFiltered)
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join(' ');
+    return `${selector} { ${styles} }`;
+  }
+  /**
+   * Converts the styles map to a CSS text string.
+   *
+   * @param {RTEFilterStyles} [styles] The styles to convert. If not provided, the strategy's stylesToBeFiltered will be used.
+   * @returns {string} The CSS text string.
+   */
+  convertStylesMapToCssText(styles) {
+    const stylesToConvert = styles || this.stylesToBeFiltered;
+    return Object.entries(stylesToConvert)
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join(' ');
+  }
+  /**
+   * Check if the styles of the block or node instance match the default paragraph styles.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @param {string[]} [checkedKeys] - Optional array of style keys to check. If not provided, all keys in stylesToBeFiltered will be checked.
+   * @returns {boolean} - True if the styles match the default paragraph styles, false otherwise.
+   */
+  isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, checkedKeys) {
+    const styles = blockOrNodeInstance.getStyles({ standalone: true });
+    return this.isMatchFilterStyles(styles, checkedKeys);
+  }
+  /**
+   * Checks if the given itemStyles match the default paragraph styles.
+   *
+   * @param {RTEFilterStyles} itemStyles - The styles to check against the default paragraph styles.
+   * @param {string[]} [checkedKeys] - Optional array of style keys to check. If not provided, all keys in stylesToBeFiltered will be checked.
+   * @returns {boolean} - True if the itemStyles match the default paragraph styles, false otherwise.
+   */
+  isMatchFilterStyles(itemStyles, checkedKeys) {
+    const keysToCheck = checkedKeys && checkedKeys.length > 0 ? checkedKeys : Object.keys(this.stylesToBeFiltered);
+    return keysToCheck.every((key) => {
+      return itemStyles[key] === this.stylesToBeFiltered[key];
+    });
+  }
+}
+/**
+ * Used for generate the style text, all styles should inside the content container.
+ * For example, if the style text is .v-rte-title {font-size: 24px;} the final generated style text should be .vega-rte-content .v-rte-title {font-size: 24px;} to make sure the styles are only applied to the elements inside the content container.
+ */
+RTEFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME = 'vega-rte-content';
+
+var NodeAnnotationTypeEnum;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+  NodeAnnotationTypeEnum["INLINE_HTML"] = "INLINE_HTML";
+  NodeAnnotationTypeEnum["PLAIN_TEXT"] = "PLAIN_TEXT";
+})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements or dto instances.
+ */
+class Predicate {
+  /**
+   * Checks if the given class name corresponds to a text block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a text block, false otherwise.
+   */
+  static isTextBlock(className) {
+    return className === this.RTE_TEXT_BLOCK_CLASS_NAME;
+  }
+  /**
+   * Checks if the given class name corresponds to a code block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a code block, false otherwise.
+   */
+  static isCodeBlock(className) {
+    return className === 'RTECodeBlock';
+  }
+  /**
+   * Checks if the given class name corresponds to a list block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a list block, false otherwise.
+   */
+  static isListBlock(className) {
+    return className === 'RTEListBlock';
+  }
+  /**
+   * Checks if the given class name corresponds to a list item block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a list item block, false otherwise.
+   */
+  static isListItemBlock(className) {
+    return className === 'RTEListItemBlock';
+  }
+  /**
+   * Checks if the given class name corresponds to a text node.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a text node, false otherwise.
+   */
+  static isTextNode(className) {
+    return className === this.RTE_TEXT_NODE_CLASS_NAME;
+  }
+  /**
+   * Checks if the given block or node instance is a text node and has a link annotation.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance The block or node instance to check.
+   * @returns {boolean} True if the block or node instance is a text node and has a link annotation, false otherwise.
+   */
+  static isLinkNode(blockOrNodeInstance) {
+    return (this.isTextNode(blockOrNodeInstance.constructor.name) &&
+      !!blockOrNodeInstance.getAnnotationByType(NodeAnnotationTypeEnum.LINK));
+  }
+  /**
+   * Checks if the given block or node instance is a code node, which is defined as a text node that has a code annotation.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance The block or node instance to check.
+   * @returns {boolean} True if the block or node instance is a code node, false otherwise.
+   */
+  static isCodeNode(blockOrNodeInstance) {
+    if (this.isTextNode(blockOrNodeInstance.constructor.name)) {
+      const codeAnnotation = blockOrNodeInstance.getAnnotationByType(NodeAnnotationTypeEnum.CODE);
+      return !!codeAnnotation && codeAnnotation.code;
+    }
+    return false;
+  }
+  /**
+   * Check if the given block or node instance is an image node, which is defined as an instance of RTEImageNode.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance The block or node instance to check.
+   * @returns {boolean} True if the block or node instance is an image node, false otherwise.
+   */
+  static isImageNode(blockOrNodeInstance) {
+    return blockOrNodeInstance.constructor.name === 'RTEImageNode';
+  }
+  /**
+   * Check if the given block or node instance is a code block node, which is defined as an instance of RTECodeBlockNode.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance The block or node instance to check.
+   * @returns {boolean} True if the block or node instance is a code block node, false otherwise.
+   */
+  static isCodeBlockNode(blockOrNodeInstance) {
+    return blockOrNodeInstance.constructor.name === 'RTECodeBlockNode';
+  }
+}
+Predicate.RTE_TEXT_NODE_CLASS_NAME = 'RTETextNode';
+Predicate.RTE_TEXT_BLOCK_CLASS_NAME = 'RTETextBlock';
+
+/**
+ * The LinkFilterStylesStrategy is responsible for filtering link styles from text nodes that are annotated as links.
+ */
+class LinkFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = LinkGroupAnnotation.getDefaultStyles();
+    this.elementTagName = 'a';
+  }
+  /**
+   * Filter default link styles from `link.customStyle` in annotations.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations to filter.
+   * @returns {VegaRTEAnnotations} The same annotations reference with link.customStyle cleaned up.
+   */
+  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;
+  }
+  /**
+   * @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;
+  }
+}
+
 /**
  * Annotation to represent a link of grouped nodes
  */
@@ -192,11 +592,15 @@ class LinkGroupAnnotation extends Annotation {
    * Convert the custom style, class and attribute to string which html can used
    *
    * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
-   * @param {RTERenderContext} options - options.
+   * @param {LinkGroupConversionOptions} options - options.
    * @returns {string} - string.
    */
   toString(linkAnnotation, options) {
-    const attributes = this.toJsx(linkAnnotation, options);
+    let attributes = this.toJsx(linkAnnotation, options);
+    if (options === null || options === void 0 ? void 0 : options.filterInlineStyles) {
+      attributes =
+        LinkGroupAnnotation.linkGroupFilterStylesStrategy.filterLinkGroupInlineStyles(attributes);
+    }
     return Object.entries(attributes)
       .map(([key, value]) => {
       const valueString = typeof value === 'string' ? value : this.formatStyleToString(value);
@@ -278,6 +682,7 @@ class LinkGroupAnnotation extends Annotation {
       .join(' ');
   }
 }
+LinkGroupAnnotation.linkGroupFilterStylesStrategy = new LinkFilterStylesStrategy();
 
 /**
  * Annotation to make block with horizontal alignment
@@ -807,26 +1212,6 @@ class InternalWrapperAnnotation extends BlockAnnotation {
   }
 }
 
-var NodeAnnotationTypeEnum;
-(function (NodeAnnotationTypeEnum) {
-  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
-  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
-  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
-  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
-  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
-  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
-  NodeAnnotationTypeEnum["CODE"] = "CODE";
-  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
-  NodeAnnotationTypeEnum["LINK"] = "LINK";
-  NodeAnnotationTypeEnum["INLINE_HTML"] = "INLINE_HTML";
-  NodeAnnotationTypeEnum["PLAIN_TEXT"] = "PLAIN_TEXT";
-})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
-/**
- * Abstract class for all annotations
- */
-class NodeAnnotation extends Annotation {
-}
-
 /**
  * Class to handle the style representation of annotations for RTE blocks and nodes.
  */
@@ -909,6 +1294,105 @@ class RTEAnnotationStyle {
   }
 }
 
+/**
+ * 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 : []);
+  }
+  /**
+   * Executes the appropriate filter styles strategy for a given block or node instance.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to filter styles for.
+   * @param {RTEFilterStyles} styles - The full set of styles to filter.
+   * @param {string[]} classNames - The class names to consider.
+   * @returns {RTEFilterInlineStylesResult} The result of filtering, including the remaining styles and class names.
+   */
+  static executeTheStrategyFilterAction(blockOrNodeInstance, styles, classNames) {
+    const dtoClassName = blockOrNodeInstance.constructor.name;
+    const strategies = this.getStrategies(dtoClassName);
+    const matchedStrategies = strategies.filter((strategy) => {
+      return strategy.canFilter(blockOrNodeInstance);
+    });
+    return matchedStrategies.reduce((result, strategy) => {
+      return strategy.filterAndDeleteStyles(result.styles, result.classNames);
+    }, {
+      styles,
+      classNames,
+    });
+  }
+  /**
+   * Executes the appropriate filter styles strategy for refilling styles on a given element.
+   *
+   * @param {string} dtoClassName The class name of the DTO.
+   * @param {HTMLElement} element The HTML element to refill styles on.
+   */
+  static executeTheStrategyRefillAction(dtoClassName, element) {
+    const strategies = this.getStrategies(dtoClassName);
+    const matchedStrategies = strategies.filter((strategy) => {
+      return strategy.canRefill(dtoClassName, element);
+    });
+    matchedStrategies.forEach((strategy) => {
+      strategy.refillStyles(element);
+    });
+  }
+  /**
+   * Based on the registered strategies, generates the CSS text for all strategies in the registry. The generated CSS text is grouped by DTO class names for better organization.
+   *
+   * @param {boolean} enableFontFaceImports - A flag indicating whether to include font-face declarations for typography styles.
+   * @returns {string} The content of style file.
+   */
+  static generateAllStylesContent(enableFontFaceImports = false) {
+    const styleBlocks = [];
+    if (enableFontFaceImports) {
+      styleBlocks.push('/* Font-face imports begin */\n');
+      styleBlocks.push(Object.keys(TypographyUrls)
+        .map((key) => {
+        return `@import url('${TypographyUrls[key].url}');\n`;
+      })
+        .join(' '));
+      styleBlocks.push('/* Font-face imports end */\n');
+    }
+    this.registry.forEach((strategies) => {
+      strategies.forEach((strategy) => {
+        const cssText = strategy.toCssText();
+        if (cssText && !styleBlocks.includes(cssText)) {
+          styleBlocks.push(cssText);
+        }
+      });
+    });
+    return styleBlocks.join(' ');
+  }
+}
+RTEFilterStylesStrategyRegistry.registry = new Map();
+
 var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
@@ -1036,21 +1520,31 @@ 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(' ')}` : '';
@@ -1348,19 +1842,29 @@ class RTEBlock {
   /**
    * Generate attributes as string
    *
+   * @param {VegaRTETransformOptions} options - Options to control the generation of the attribute string, such as whether to filter inline styles.
    * @param {...string} attrs - Additional attributes to include
    * @returns {string} - Attributes as string
    */
-  generateAttributeString(...attrs) {
+  generateAttributeString(options, ...attrs) {
     var _a;
     const blockAnnotationStyle = new RTEAnnotationStyle(this);
-    const styles = blockAnnotationStyle.toCssText({ standalone: true });
+    const fullStyles = blockAnnotationStyle.toJSON({ standalone: true });
     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="${blockAnnotationStyle.toCssText({ standalone: true }, undefined, styles)}"`
+        : null,
       ...attrs,
     ].filter(isNonNullable);
     return attributes.length ? ` ${attributes.join(' ')}` : '';
@@ -1786,6 +2290,26 @@ const VegaRTEPresetToolbarItems = [
   ['image'],
   ['clearStyle'],
 ];
+/**
+ * Void/self-closing HTML elements that have no closing tag and cannot contain children.
+ * Source: https://html.spec.whatwg.org/multipage/syntax.html#void-elements
+ */
+const HTML_VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
 
 /**
  * Annotation to make text with text color
@@ -2555,6 +3079,7 @@ class InlineHtmlAnnotation extends Annotation {
   static from(inlineHtml) {
     const { htmlTag, child, customStyle, customClass, customAttribute } = inlineHtml;
     const inlineHtmlAnnotation = new InlineHtmlAnnotation(htmlTag);
+    inlineHtmlAnnotation.groupId = inlineHtml.groupId;
     inlineHtmlAnnotation.child = child ? InlineHtmlAnnotation.from(child)[1] : undefined;
     inlineHtmlAnnotation.customAttribute = customAttribute
       ? CustomAttributeAnnotation.from(customAttribute)[1]
@@ -2575,12 +3100,22 @@ class InlineHtmlAnnotation extends Annotation {
   clone() {
     var _a, _b, _c, _d;
     const inlineHtmlAnnotation = new InlineHtmlAnnotation(this.htmlTag);
+    inlineHtmlAnnotation.groupId = this.groupId;
     inlineHtmlAnnotation.child = (_a = this.child) === null || _a === void 0 ? void 0 : _a.clone();
     inlineHtmlAnnotation.customAttribute = (_b = this.customAttribute) === null || _b === void 0 ? void 0 : _b.clone();
     inlineHtmlAnnotation.customClass = (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.clone();
     inlineHtmlAnnotation.customStyle = (_d = this.customStyle) === null || _d === void 0 ? void 0 : _d.clone();
     return inlineHtmlAnnotation;
   }
+  /**
+   * Build the props object used when rendering this annotation.
+   *
+   * @returns {Record<string, unknown>} Props for h(tag, props, children).
+   */
+  renderProps() {
+    var _a, _b, _c;
+    return Object.assign(Object.assign({}, (_a = this.customAttribute) === null || _a === void 0 ? void 0 : _a.render()), { style: (_b = this.customStyle) === null || _b === void 0 ? void 0 : _b.renderStyle(), class: (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.renderClass().join(' ') });
+  }
   /**
    * Generate the JSON representation of the annotation
    *
@@ -2591,6 +3126,7 @@ class InlineHtmlAnnotation extends Annotation {
     return {
       inlineHtml: cleanObject({
         htmlTag: this.htmlTag,
+        groupId: this.groupId,
         child: (_a = this.child) === null || _a === void 0 ? void 0 : _a.toJSON().inlineHtml,
         customAttribute: (_b = this.customAttribute) === null || _b === void 0 ? void 0 : _b.toJSON().customAttribute,
         customClass: (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.toJSON().customClass,
@@ -2829,9 +3365,11 @@ 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.
@@ -2856,6 +3394,9 @@ 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';
   }
   /**
@@ -2895,6 +3436,54 @@ 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.
    */
@@ -2993,35 +3582,51 @@ 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>`;
@@ -3757,10 +4362,10 @@ class RTETextBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const BlockTag = this.getBlockTag();
-    const attrStr = super.generateAttributeString();
-    const nodesHtml = this.getChildrenHtml();
+    const attrStr = super.generateAttributeString(options);
+    const nodesHtml = this.getChildrenHtml(options);
     return super.shouldRenderAsInternalWrapper()
       ? nodesHtml
       : [`<${BlockTag}${attrStr}>`, nodesHtml, `</${BlockTag}>`].join('');
@@ -3829,13 +4434,14 @@ class RTETextBlock extends RTEBlock {
   /**
    * Get the HTML string for the children nodes, including handling link group annotations.
    *
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the children nodes are rendered as HTML.
    * @returns {string} The HTML string representing the children nodes.
    */
-  getChildrenHtml() {
+  getChildrenHtml(options) {
     const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    let nodesHtml = this.children.map((node) => node.toHtml()).join('');
+    let nodesHtml = this.renderGroupedNodesAtDepth(this.children, 0, options);
     if (linkGroupAnnotation && this.children.length > 0) {
-      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
+      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml, options);
     }
     return nodesHtml;
   }
@@ -3848,14 +4454,53 @@ class RTETextBlock extends RTEBlock {
       strategy.execute(action, this);
     }
   }
+  /**
+   * Recursively groups `nodes` by their inline HTML wrapper at the given
+   * `depth`, emitting shared wrappers for adjacent siblings with the same
+   * `groupId` and descending into the next depth for each group.
+   *
+   * @param {RTETextNode[]} nodes - The nodes to render.
+   * @param {number} depth - Current depth in the inline HTML chain (0 = outermost).
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options.
+   * @returns {string} HTML string with grouped wrappers at this depth.
+   */
+  renderGroupedNodesAtDepth(nodes, depth, options) {
+    var _a;
+    let 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 += nodes[i].renderHtmlFromDepth(depth, options);
+        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.
+        result += nodes[i].renderHtmlFromDepth(depth, options);
+      }
+      else {
+        const innerHtml = this.renderGroupedNodesAtDepth(nodes.slice(i, groupEnd), depth + 1, options);
+        result += `<${tag.htmlTag}${tag.attrStr}>${innerHtml}</${tag.htmlTag}>`;
+      }
+      i = groupEnd;
+    }
+    return result;
+  }
   /**
    * Generate Link Html
    *
    * @param {LinkGroupAnnotation} linkGroupAnnotation - linkGroupAnnotation
    * @param {string} nodesHtml - The nodes html
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the children nodes are rendered as HTML.
    * @returns {string} link html
    */
-  generateLinkHtml(linkGroupAnnotation, nodesHtml) {
+  generateLinkHtml(linkGroupAnnotation, nodesHtml, options) {
     nodesHtml = '';
     let linkGroupNodes = [];
     for (let i = 0; i < this.children.length; i++) {
@@ -3869,17 +4514,18 @@ class RTETextBlock extends RTEBlock {
           currentLinkAnnotation.link.groupKey !== nextLinkAnnotation.link.groupKey) {
           const linkAttributes = linkGroupAnnotation.toString(currentLinkAnnotation, {
             standalone: true,
+            filterInlineStyles: options === null || options === void 0 ? void 0 : options.filterInlineStyles,
           });
           nodesHtml += [
             `<a${linkAttributes ? ` ${linkAttributes}` : ''}>`,
-            linkGroupNodes.map((linkNode) => linkNode.toHtml()).join(''),
+            this.renderGroupedNodesAtDepth(linkGroupNodes, 0, options),
             `</a>`,
           ].join('');
           linkGroupNodes = [];
         }
       }
       else {
-        nodesHtml += this.children[i].toHtml();
+        nodesHtml += this.children[i].toHtml(options);
       }
     }
     return nodesHtml;
@@ -4255,6 +4901,52 @@ RTEDecoratorNode.DECORATOR_CONTAINER_CLASS = 'v-internal-decorator-container';
 // CSS class names for the decorator node element
 RTEDecoratorNode.DECORATOR_NODE_CLASS = 'v-internal-decorator-node';
 
+/**
+ * Filter styles strategy for code block node, which defines the styles to be filtered and the conditions for filtering and refilling styles for code block nodes.
+ */
+class CodeBlockNodeFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = CodeBlockNodeFilterStylesStrategy.STYLES;
+    this.elementTagName = 'pre code';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isCodeBlockNode(blockOrNodeInstance);
+  }
+  /**
+   * The code node styles is preset and will convert to vega-code-block element so we don't need to to refill styles back to element.
+   *
+   * @param {string} _blockOrNodeClassName The class name of the block or node.
+   * @param {HTMLElement} _element The HTML element to check.
+   * @returns {boolean} False, as we don't need to refill styles for code nodes.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canRefill(_blockOrNodeClassName, _element) {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}
+CodeBlockNodeFilterStylesStrategy.STYLES = {
+  boxSizing: 'border-box',
+  color: 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
+  textAlign: 'left',
+  fontFamily: '"Roboto Mono"',
+  fontWeight: '400',
+  lineHeight: '22px',
+  fontSize: '16px',
+  whiteSpace: 'pre-wrap',
+  minHeight: '22px',
+  tabSize: '2px',
+};
+
 /**
  * RTE code node DTO class.
  */
@@ -4267,6 +4959,7 @@ 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.
@@ -4279,8 +4972,9 @@ 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
@@ -4359,6 +5053,44 @@ class RemoveChildrenStrategy extends ActionHandleStrategy {
   }
 }
 
+/**
+ * Filter styles strategy for code block, which defines the styles to be filtered and the conditions for filtering and refilling styles for code blocks.
+ */
+class CodeBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = CodeBlockFilterStylesStrategy.STYLES;
+    this.elementTagName = 'pre';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isCodeBlock(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * The code block styles is preset and will convert to vega-code-block element so we don't need to to refill styles back to element.
+   *
+   * @param {string} _blockOrNodeClassName The class name of the block or node.
+   * @param {HTMLElement} _element The HTML element to check.
+   * @returns {boolean} False, as we don't need to refill styles for code blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canRefill(_blockOrNodeClassName, _element) {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}
+CodeBlockFilterStylesStrategy.STYLES = {
+  backgroundColor: 'rgba(var(--v-bg-secondary, 245, 247, 247, 1))',
+  padding: '12px',
+};
+
 /**
  * The code block DTO class.
  */
@@ -4366,6 +5098,7 @@ class RTECodeBlock extends RTEBlock {
   constructor(id, content, language) {
     super(id);
     this.type = 'code-block';
+    this.annotationMap = new Map([CustomStyleAnnotation.from(CodeBlockFilterStylesStrategy.STYLES)]);
     this.children = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
   }
   /**
@@ -4392,9 +5125,10 @@ class RTECodeBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const { language = CodeLanguage['Plain Text'] } = this.children[0];
-    return `<pre data-language="${language}" style="background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1)); padding: 12px">${this.children.map((node) => node.toHtml())}</pre>`;
+    const attrStr = super.generateAttributeString(options);
+    return `<pre data-language="${language}"${attrStr}>${this.children.map((node) => node.toHtml(options))}</pre>`;
   }
   /**
    * @inheritDoc
@@ -4452,4 +5186,4 @@ class RTECodeBlock extends RTEBlock {
 })();
 RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
 
-export { TextStyleAnnotation as $, ActionHandleStrategyRegistry as A, BlockAnnotation as B, CommonAnnotationTypeEnum as C, NodeAnnotationTypeEnum as D, RTEDecoratorNode as E, NodeTypeEnum as F, CommonAnnotation as G, HorizontalAlignmentAnnotationAction as H, InsertChildrenAfterAction as I, ReplaceChildNodesAction as J, SplitBlockWithNodeAction as K, BlockDeleteNodeContentStrategy as L, ModifyContentAction as M, NodeAnnotation as N, RemoveChildrenStrategy as O, BOLD_FONT_WEIGHT_KEYWORD as P, BOLD_FONT_WEIGHT as Q, RTEDTOClassManager$1 as R, SyncUpSelectionAction as S, TextStyleAnnotationAction as T, UpdateTextAction as U, VegaRTEPresetToolbarItems as V, RTE_TEXT_COLORS as W, RTE_DEFAULT_TEXT_COLOR as X, ITALIC_FONT_STYLE as Y, STRIKETHROUGH_TEXT_DECORATION as Z, UNDERLINE_TEXT_DECORATION as _, ActionHandlerInterceptorRegistry as a, HorizontalAlignmentAnnotation as a0, CodeAnnotation as a1, LinkGroupAnnotation as a2, CodeLanguage as a3, ZERO_WIDTH_SPACE as a4, LinkAnnotationAction as a5, UpdateCodeBlockAction as a6, SelectionChangeAction as a7, TextColorAnnotationAction as a8, RTECodeBlockNode as a9, BoldAnnotationAction as aa, ItalicAnnotationAction as ab, UnderlineAnnotationAction as ac, BoldAnnotation as ad, ClearFormattingAnnotationAction as ae, CodeAnnotationAction as af, StrikethroughAnnotationAction as ag, IndentAnnotationAction as ah, RTETextNode as b, RTEBlock as c, RTETextBlock as d, RTEAnnotationStyle as e, ActionHandleStrategy as f, AppendChildrenAction as g, RTENode as h, InsertChildrenBeforeAction as i, InternalAnnotationTypeEnum as j, ModifyContentActionType as k, AnnotationAction as l, RemoveChildrenAction as m, CustomAttributeAnnotation as n, BlockUpdateTextStyleStrategy as o, BlockUpdateHorizontalAlignmentStrategy as p, BlockInsertLineBreakStrategy as q, BlockInsertLineBreakWithBlocksStrategy as r, stateEntityRenderingRegistry as s, BlockSplitWithTextNodeStrategy as t, BlockReplaceNodesStrategy as u, BlockMergeNodesStrategy as v, BlockAnnotationTypeEnum as w, CustomStyleAnnotation as x, CustomClassAnnotation as y, RTECodeBlock as z };
+export { RTE_DEFAULT_TEXT_COLOR as $, ActionHandleStrategyRegistry as A, BlockAnnotation as B, CommonAnnotationTypeEnum as C, CustomClassAnnotation as D, RTECodeBlock as E, NodeAnnotationTypeEnum as F, RTEDecoratorNode as G, HorizontalAlignmentAnnotationAction as H, InsertChildrenAfterAction as I, NodeTypeEnum as J, CommonAnnotation as K, ReplaceChildNodesAction as L, ModifyContentAction as M, NodeAnnotation as N, SplitBlockWithNodeAction as O, HTML_VOID_TAGS as P, BlockDeleteNodeContentStrategy as Q, RTEFilterStylesStrategyRegistry as R, SyncUpSelectionAction as S, TextStyleAnnotationAction as T, UpdateTextAction as U, VegaRTEPresetToolbarItems as V, RemoveChildrenStrategy as W, BOLD_FONT_WEIGHT_KEYWORD as X, BOLD_FONT_WEIGHT as Y, createStyleMapFromElement as Z, RTE_TEXT_COLORS as _, ActionHandlerInterceptorRegistry as a, ITALIC_FONT_STYLE as a0, STRIKETHROUGH_TEXT_DECORATION as a1, UNDERLINE_TEXT_DECORATION as a2, TextStyleAnnotation as a3, Predicate as a4, HorizontalAlignmentAnnotation as a5, CodeAnnotation as a6, LinkFilterStylesStrategy as a7, CodeBlockFilterStylesStrategy as a8, RTECodeBlockNode as a9, CodeBlockNodeFilterStylesStrategy as aa, CodeLanguage as ab, ZERO_WIDTH_SPACE as ac, LinkAnnotationAction as ad, UpdateCodeBlockAction as ae, SelectionChangeAction as af, TextColorAnnotationAction as ag, BoldAnnotationAction as ah, ItalicAnnotationAction as ai, UnderlineAnnotationAction as aj, BoldAnnotation as ak, ClearFormattingAnnotationAction as al, CodeAnnotationAction as am, StrikethroughAnnotationAction as an, IndentAnnotationAction as ao, RTEDTOClassManager$1 as b, RTETextNode as c, RTEBlock as d, RTETextBlock as e, RTEAnnotationStyle as f, ActionHandleStrategy as g, AppendChildrenAction as h, RTENode as i, InsertChildrenBeforeAction as j, InternalAnnotationTypeEnum as k, ModifyContentActionType as l, AnnotationAction as m, RemoveChildrenAction as n, CustomAttributeAnnotation as o, RTEFilterStylesStrategy as p, BlockUpdateTextStyleStrategy as q, BlockUpdateHorizontalAlignmentStrategy as r, stateEntityRenderingRegistry as s, BlockInsertLineBreakStrategy as t, BlockInsertLineBreakWithBlocksStrategy as u, BlockSplitWithTextNodeStrategy as v, BlockReplaceNodesStrategy as w, BlockMergeNodesStrategy as x, BlockAnnotationTypeEnum as y, CustomStyleAnnotation as z };