@heartlandone/vega 2.80.0 → 2.82.0

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

@@ -0,0 +1,47 @@
+import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
+/**
+ * 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.
+ */
+export 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',
+};

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

@@ -1,3 +1,4 @@
+import { TypographyUrls } from '../../../../constants/tokens/typography';
 /**
  * Registry for managing filter styles strategies keyed by DTO class name.
  *
@@ -31,5 +32,68 @@ export class RTEFilterStylesStrategyRegistry {
     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();

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

@@ -1,3 +1,5 @@
+import { camelToDashCase } from '../../../../utils/string';
+import { createStyleMapFromElement } from '../../helpers/utils';
 /**
  * Abstract strategy class for filtering default styles in the rich text editor.
  * Concrete strategies define which styles to strip via `stylesToBeFiltered`.
@@ -7,18 +9,13 @@
  *   2. Annotation parsing strategies – strip redundant defaults when converting HTML → DTO.
  */
 export class RTEFilterStylesStrategy {
-  /**
-   * 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.
-   *
-   * @returns {boolean} Whether filtering should always apply.
-   */
-  get alwaysFilter() {
-    return false;
+  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.
@@ -38,6 +35,86 @@ export class RTEFilterStylesStrategy {
     }
     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.
@@ -47,8 +124,8 @@ export class RTEFilterStylesStrategy {
    */
   extractAndDeleteMatchedStyles(styles) {
     let wasExtracted = false;
-    if (styles) {
-      const defaults = this.stylesToBeFiltered;
+    const defaults = this.stylesToBeFiltered;
+    if (styles && defaults) {
       const styleKeys = Object.keys(defaults);
       for (const key of styleKeys) {
         if (styles[key] === defaults[key]) {
@@ -59,4 +136,60 @@ export class RTEFilterStylesStrategy {
     }
     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';

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

@@ -1,16 +1,39 @@
 import { ImageAnnotation } from '../../annotations/image-annotation';
 import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
 /**
- * Filters the default ImageAnnotation base styles (verticalAlign) from
- * customStyle when parsing an RTEImageNode.
+ * Filter styles strategy for image node, which defines the styles to be filtered and the conditions for filtering and refilling styles for image nodes.
  */
 export class ImageFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
     super(...arguments);
     this.stylesToBeFiltered = ImageAnnotation.getDefaultStyles();
+    this.elementTagName = 'img';
   }
-  /** @returns {boolean} Always `true` — image defaults are emitted as inline styles. */
+  /**
+   * Used for the filterAnnotations method.
+   *
+   * @returns {boolean} Always `true` — image defaults are emitted as inline styles.
+   */
   get alwaysFilter() {
     return true;
   }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isImageNode(blockOrNodeInstance);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
 }

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

@@ -1,5 +1,6 @@
 import { ListAnnotation } from '../../annotations/list-annotation';
 import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
 /**
  * Filters the default ListAnnotation styles (paddingLeft, marginLeft) from
  * customStyle when parsing an RTEListBlock.
@@ -8,5 +9,28 @@ export class ListBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
     super(...arguments);
     this.stylesToBeFiltered = ListAnnotation.getDefaultStyles();
+    this.elementTagName = 'ol,ul';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isListBlock(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return Predicate.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)} }`;
   }
 }

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

@@ -0,0 +1,29 @@
+import { Predicate } from '../predicate';
+import { HeadingFilterStylesStrategy } from '../text-block/heading-filter-styles-strategy';
+/**
+ * Filters the default heading styles from customStyle when parsing an RTEListItemBlock that is supposed to be a heading.
+ */
+export 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.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      element.classList.contains(this.classNameToBeAdded));
+  }
+}

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

@@ -1,5 +1,6 @@
 import { TextStyleAnnotation } from '../../annotations/text-style-annotation';
 import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
 /**
  * Filters the default paragraph styles from customStyle when parsing an
  * RTEListItemBlock.  List-item blocks implicitly use paragraph styling,
@@ -8,6 +9,43 @@ import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
 export 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.isListItemBlock(blockOrNodeInstance.constructor.name) && isDefaultStyles;
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate.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()));
   }
 }

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

@@ -0,0 +1,29 @@
+import { Predicate } from '../predicate';
+import { TitleFilterStylesStrategy } from '../text-block/title-filter-styles-strategy';
+/**
+ * Filters the default title/subtitle styles from customStyle when parsing an RTEListItemBlock that is supposed to be a title/subtitle.
+ */
+export 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.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      element.classList.contains(this.classNameToBeAdded));
+  }
+}

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

@@ -0,0 +1,94 @@
+import { NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements or dto instances.
+ */
+export 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';

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

@@ -0,0 +1,15 @@
+import { TextStyleAnnotation } from '../../annotations/text-style-annotation';
+import { ParagraphFilterStylesStrategy } from './paragraph-filter-styles-strategy';
+/**
+ * The HeadingFilterStylesStrategy class is responsible for filtering and refilling styles for heading text blocks (h1 to h6) in the rich text editor.
+ */
+export 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);
+  }
+}

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

@@ -0,0 +1,48 @@
+import { TextStyleAnnotation } from '../../annotations/text-style-annotation';
+import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
+/**
+ *
+ */
+export 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.isTextBlock(blockOrNodeInstance.constructor.name) &&
+      blockOrNodeInstance.type === this.type);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    const selector = this.classNameToBeAdded
+      ? `.${this.classNameToBeAdded}`
+      : this.elementTagName;
+    return Predicate.isTextBlock(blockOrNodeClassName) && element.matches(selector);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}