@heartlandone/vega 2.79.0 → 2.81.0

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

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();