@heartlandone/vega 2.80.0 → 2.81.0

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-direction-controller.js

@@ -4,15 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
 import responsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
 import { isResponsiveType } from '../../../../types/type-guard';
 import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
 /**
  * Controls the current direction of the progress tracker component.
  */
-export class VegaProgressTrackerCurrentDirectionController extends VegaSlimmer {
+export class VegaProgressTrackerCurrentDirectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   constructor() {
     super(...arguments);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
@@ -22,8 +23,15 @@ export class VegaProgressTrackerCurrentDirectionController extends VegaSlimmer {
        */
       // eslint-disable-next-line jsdoc/require-jsdoc
       callback: /* istanbul ignore next */ async () => {
+        const currentAtResize = this.current;
+        const directionBeforeResize = this.currentDirection;
         this.setCurrentDirection();
-        await this.renderer.gotoCarouselPage();
+        if (directionBeforeResize === this.currentDirection) {
+          await this.renderer.gotoCarouselPage(currentAtResize);
+          return;
+        }
+        // Sync carousel page after component re-render when direction changes.
+        this.enqueueSyncCarouselPage(currentAtResize);
       },
     });
   }
@@ -47,6 +55,26 @@ export class VegaProgressTrackerCurrentDirectionController extends VegaSlimmer {
   watchDirection() {
     this.setCurrentDirection();
   }
+  /**
+   * No-op: carousel sync is handled via closure-captured value in enqueueSyncCarouselPage().
+   */
+  async doTask() {
+    methodPlaceholder();
+  }
+  /**
+   * Enqueue a carousel page sync with the value captured in a closure,
+   * avoiding shared mutable state between enqueue and execution.
+   *
+   * @param {number} page - The carousel page index to sync to
+   */
+  enqueueSyncCarouselPage(page) {
+    void this.autoRunTaskQueue.enqueue({
+      /** Sync carousel to the captured page after re-render */
+      run: async () => {
+        await this.renderer.gotoCarouselPage(page);
+      },
+    }, false);
+  }
   /**
    * The function sets the current direction of a progress tracker
    * based on the component's direction and the current breakpoint.
@@ -62,6 +90,9 @@ export class VegaProgressTrackerCurrentDirectionController extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaProgressTrackerCurrentDirectionController.prototype, "direction", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentDirectionController.prototype, "current", void 0);
 __decorate([
   MapToComponentField()
 ], VegaProgressTrackerCurrentDirectionController.prototype, "renderer", void 0);

package/dist/collection/components/vega-progress-tracker/slimmers/renderers/vega-progress-tracker-renderer.js

@@ -41,9 +41,10 @@ export class VegaProgressTrackerRenderer extends VegaSlimmer {
       changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), index);
     };
   }
-  async gotoCarouselPage() {
+  async gotoCarouselPage(current) {
+    const targetCurrent = current !== null && current !== void 0 ? current : this.current;
     if (this.carouselContainerRef.getBoundingClientRect().width > 0) {
-      await this.carouselRef.goToPage(this.current + 1);
+      await this.carouselRef.goToPage(targetCurrent + 1);
     }
   }
   render() {

package/dist/collection/components/vega-rich-text-editor/constants/constant.js

@@ -42,3 +42,23 @@ export 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
+ */
+export const HTML_VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);

package/dist/collection/components/vega-rich-text-editor/dto/annotations/image-annotation.js

@@ -79,3 +79,4 @@ export class ImageAnnotation extends NodeAnnotation {
     }
   }
 }
+ImageAnnotation.BASE_STYLES = { verticalAlign: 'bottom' };

package/dist/collection/components/vega-rich-text-editor/dto/annotations/inline-html-annotation.js

@@ -22,6 +22,7 @@ export 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]
@@ -42,12 +43,22 @@ export 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
    *
@@ -58,6 +69,7 @@ export 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,

package/dist/collection/components/vega-rich-text-editor/dto/annotations/link-group-annotation.js

@@ -1,5 +1,6 @@
 import { Annotation, InternalAnnotationTypeEnum } from './annotation.abstract';
 import { camelToDashCase } from '../../../../utils/string';
+import { LinkFilterStylesStrategy } from '../filter-styles-strategies/text-node/link-filter-styles-strategy';
 /**
  * Annotation to represent a link of grouped nodes
  */
@@ -32,11 +33,15 @@ export 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);
@@ -118,3 +123,4 @@ export class LinkGroupAnnotation extends Annotation {
       .join(' ');
   }
 }
+LinkGroupAnnotation.linkGroupFilterStylesStrategy = new LinkFilterStylesStrategy();

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

@@ -16,6 +16,7 @@ import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { InternalWrapperAnnotation } from '../annotations/internal-wrapper-annotation';
 import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
 import { RTEAnnotationStyle } from '../annotations/annotation-style';
+import { RTEFilterStylesStrategyRegistry } from '../filter-styles-strategies/filter-styles-strategy-registry';
 /**
  * Abstract class for block
  */
@@ -208,19 +209,29 @@ export 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(' ')}` : '';

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

@@ -12,6 +12,8 @@ import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
 import { CodeBlockInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/code-block-insert-image-strategy';
 import { CodeLanguage } from '../../../vega-code-block/types';
 import { RemoveChildrenStrategy } from '../action-handle-strategies/modify-content-strategies/remove-children-strategy';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
+import { CodeBlockFilterStylesStrategy } from '../filter-styles-strategies/code-block/code-block-filter-styles-strategy';
 /**
  * The code block DTO class.
  */
@@ -19,6 +21,7 @@ export 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)];
   }
   /**
@@ -45,9 +48,10 @@ export 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

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

@@ -1,4 +1,5 @@
 import { RTEBlock } from './block.abstract';
+import { HTML_VOID_TAGS } from '../../constants/constant';
 /**
  * HTML Block
  */
@@ -45,23 +46,26 @@ export 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('');
   }
@@ -72,13 +76,3 @@ export 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']);

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

@@ -45,9 +45,9 @@ export 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('');

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

@@ -81,12 +81,12 @@ export 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('');
   }

package/dist/collection/components/vega-rich-text-editor/dto/blocks/list-item-block.js

@@ -71,13 +71,9 @@ export 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

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

@@ -137,10 +137,10 @@ export 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('');
@@ -209,13 +209,14 @@ export 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;
   }
@@ -228,14 +229,53 @@ export 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++) {
@@ -249,17 +289,18 @@ export 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;

package/dist/collection/components/vega-rich-text-editor/dto/content-state.js

@@ -22,6 +22,7 @@ import './setup';
 import { StylePreservator } from '../../../helpers/csp/styles-preservator';
 import { LogUtility } from '../../../utils/log';
 import { HTMLContentCleaner } from '../slimmers/controllers/html-cleaner';
+import { RTEFilterStylesStrategyRegistry } from './filter-styles-strategies/filter-styles-strategy-registry';
 /**
  * Class representing the content state of the rich text editor.
  */
@@ -97,6 +98,15 @@ export 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.
    *
@@ -119,18 +129,20 @@ export 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.
@@ -138,7 +150,14 @@ export 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

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

@@ -0,0 +1,39 @@
+import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
+import { Predicate } from '../predicate';
+/**
+ * Filter styles strategy for code block, which defines the styles to be filtered and the conditions for filtering and refilling styles for code blocks.
+ */
+export 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',
+};

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',
+};