@heartlandone/vega 2.63.0 → 2.63.1

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

@@ -15,6 +15,7 @@ import { AppendChildrenStrategy } from './action-handle-strategies/modify-conten
 import { InsertChildrenBeforeStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-before-strategy';
 import { InsertChildrenAfterStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-after-strategy';
 import './setup';
+import { StylePreservator } from '../../../helpers/csp/styles-preservator';
 /**
  * Class representing the content state of the rich text editor.
  */
@@ -94,8 +95,12 @@ export class VegaRTEContent {
     })
       .replace(/(>)[\n\t]+(?=[a-zA-Z0-9_\W])/g, '$1')
       .replace(/([a-zA-Z0-9_\W])[\n\t]+(?=<)/g, '$1');
-    const body = new DOMParser().parseFromString(formattedHtml, 'text/html').body;
-    const blocks = ElementToDtoStrategyProcessor.process(Array.from(body.childNodes), options)
+    const context = StylePreservator.preserve(formattedHtml);
+    const safeHtml = context.getProcessedHtml();
+    const body = new DOMParser().parseFromString(safeHtml, 'text/html').body;
+    const htmlElements = Array.from(body.childNodes);
+    context.restore(htmlElements);
+    const blocks = ElementToDtoStrategyProcessor.process(htmlElements, options)
       .filter(isNonNullable)
       .map((output) => output.toDto(options))
       .filter(isNonNullable);

package/dist/collection/components/vega-rich-text-editor/dto/nodes/decorator-node.js

@@ -1,5 +1,4 @@
 import { findParent } from '../../../../utils/ui';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { RTENode } from './node.abstract';
 /**
  * Abstract class for decorator nodes. A decorator node modifies content like an image node that will delete the whole node when the delete button is pressed.
@@ -38,7 +37,7 @@ export class RTEDecoratorNode extends RTENode {
    * @inheritDoc
    */
   getRangeContainer() {
-    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    const element = this.getElementRef();
     if (element) {
       return findParent(element, `.${RTEDecoratorNode.DECORATOR_CONTAINER_CLASS}`);
     }

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -130,6 +130,14 @@ export class RTENode {
   isTextNode() {
     return false;
   }
+  /**
+   * Get the HTMLElement reference associated with this node.
+   *
+   * @returns {Nullable<HTMLElement>} The HTMLElement reference or null if not found.
+   */
+  getElementRef() {
+    return stateEntityRenderingRegistry.getDOMByEntity(this);
+  }
   /**
    * Generate attributes as string
    *

package/dist/collection/components/vega-rich-text-editor/dto/nodes/text-node.js

@@ -3,7 +3,6 @@ import { NodeAnnotation, NodeAnnotationTypeEnum } from '../annotations/node-anno
 import { AnnotationAction } from '../actions/annotation-action.abstract';
 import { TextSplittableAction } from '../actions/splittable-action.abstract';
 import { SelectionRangeAnnotation } from '../annotations/selection-range-annotation';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { generateUUID } from '../../../../utils/misc';
 import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
 import { StrikethroughAnnotation } from '../annotations/strikethrough-annotation';
@@ -188,7 +187,7 @@ export class RTETextNode extends RTENode {
    * @inheritDoc
    */
   getRangeContainer() {
-    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    const element = this.getElementRef();
     if (element) {
       if (this.isContentEditable()) {
         return element.firstChild;
@@ -289,7 +288,7 @@ export class RTETextNode extends RTENode {
    * @param {RTETextNode} selectedNode - The selected node
    */
   syncUpSelectedNodes(selectedNode) {
-    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
+    const currentNodeDom = this.getElementRef();
     if (currentNodeDom) {
       const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
       if (nodeSubject) {

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-extension.js

@@ -80,13 +80,16 @@ export class VegaRTELanguageExtension extends VegaRTEExtension {
   applyLanguageContent(selectedLanguage, contentMap) {
     if (this.extensionContext && contentMap) {
       let content = contentMap[selectedLanguage];
+      const { host, flushValue } = this.extensionContext;
       if (content) {
-        content = content instanceof VegaRTEContent ? content : VegaRTEContent.fromJSON(content);
+        content =
+          content instanceof VegaRTEContent
+            ? content
+            : VegaRTEContent.fromJSON(content, host.sourceEditConfig);
       }
       else {
         content = VegaRTEContent.createEmptyContent();
       }
-      const { host, flushValue } = this.extensionContext;
       if (host.value !== content) {
         flushValue(content, true);
       }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -4,6 +4,7 @@ import { InsertChildrenAfterAction } from '../../../../dto/actions/insert-childr
 import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
 import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
 import ElementToDtoStrategyProcessor from '../element-to-dto-strategy/element-to-dto-strategy-processor';
+import { StylePreservator } from '../../../../../../helpers/csp/styles-preservator';
 /**
  * Handle user paste
  */
@@ -65,7 +66,7 @@ export class InsertPasteHandler extends BaseHandler {
     }
   }
   /**
-   * Format and parse elements from user paste.
+   * Format and parse elements from user paste with simple style preservation.
    *
    * @param {InputEvent} event - Paste event.
    * @returns {RTEContentBlock[]} - RTEContentBlock.
@@ -76,10 +77,13 @@ export class InsertPasteHandler extends BaseHandler {
       const pastedText = event.dataTransfer.getData('text/plain');
       pastedHTML = this.parsePlainText(pastedText);
     }
-    // eslint-disable-next-line no-restricted-globals
-    const tempContainer = document.createElement('div');
-    tempContainer.innerHTML = pastedHTML;
-    return ElementToDtoStrategyProcessor.process(Array.from(tempContainer.childNodes))
+    const context = StylePreservator.preserve(pastedHTML);
+    const safeHtml = context.getProcessedHtml();
+    const parser = new DOMParser();
+    const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
+    const htmlElements = Array.from(parsedDoc.body.childNodes);
+    context.restore(htmlElements);
+    return ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/controllers/written-mode-svg-controller.js

@@ -40,13 +40,11 @@ export class WrittenModeSvgController extends VegaSlimmer {
       // eslint-disable-next-line no-restricted-globals
       this.currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       this.currentPath.setAttribute('d', `M ${x} ${y}`);
-      Object.assign(this.currentPath.style, {
-        stroke: 'rgba(4, 4, 28, 1)',
-        strokeWidth: this.penWidth,
-        fill: 'none',
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      });
+      this.currentPath.setAttribute('stroke', 'rgba(4, 4, 28, 1)');
+      this.currentPath.setAttribute('stroke-width', this.penWidth);
+      this.currentPath.setAttribute('fill', 'none');
+      this.currentPath.setAttribute('stroke-linecap', 'round');
+      this.currentPath.setAttribute('stroke-linejoin', 'round');
       this.signatureContainerRef.appendChild(this.currentPath);
     };
     /*

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/renderers/written-mode-renderer.js

@@ -57,11 +57,7 @@ export class WrittenModeRenderer extends VegaSlimmer {
    * When the clear button is displayed, since the error message and the clear button are in the same line, this element is displayed.
    */
   renderSignaturePad() {
-    return (h("svg", { style: {
-        width: '100%',
-        height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'),
-        touchAction: 'none',
-      }, ref: (ref) => this.writtenModeSvgController.setSignatureContainerRef(ref) }));
+    return (h("svg", { width: "100%", height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'), "touch-action": "none", ref: (ref) => this.writtenModeSvgController.setSignatureContainerRef(ref) }));
   }
   renderFooter() {
     return (this.showClearBtn && (h("vega-flex", { class: "signature-capture-written-footer", justifyContent: "space-between" },

package/dist/collection/global/scripts/before-vega-load.js

@@ -17,6 +17,8 @@ import { VegaSkeletonLoader } from '../../helpers/skeleton-loader/vega-skeleton-
 import { VegaTranslation } from '../../helpers/translation';
 import { VegaTranslateObserverSlimmer } from '../../helpers/slimmers/global/vega-translate-observer-slimmer';
 import { VegaRTEContent } from '../../components/vega-rich-text-editor/dto/content-state';
+import { setVegaNonce, vegaNonceManager } from '../../helpers/csp/vega-nonce-manager';
+import { VegaNonceInjectorSlimmer } from '../../helpers/slimmers/global/vega-nonce-injector-slimmer';
 import { VegaRTETokenExtension } from '../../components/vega-rich-text-editor/extensions/tokens/token-extension';
 import { VegaRTELanguageExtension } from '../../components/vega-rich-text-editor/extensions/languages/language-extension';
 import { VegaRTEPresetToolbarItems } from '../../components/vega-rich-text-editor/constants/constant';
@@ -45,6 +47,8 @@ export default function () {
   injectVegaRichTextEditorClassIntoGlobal();
   injectVegaPublicValidationRules();
   applyBrandingFromClientGlobal();
+  injectSetNonceIntoGlobal();
+  patchHeadInsertBeforeWithNonce();
 }
 /**
  * Disable feature flags from the client global defined lists.
@@ -96,7 +100,11 @@ function injectVegaDialogIntoGlobal() {
  * register global vega slimmers
  */
 function registerGlobalVegaSlimmers() {
-  GlobalSlimmersRegistry.register([VegaWatchMethodCancelSlimmer, VegaTranslateObserverSlimmer]);
+  GlobalSlimmersRegistry.register([
+    VegaWatchMethodCancelSlimmer,
+    VegaTranslateObserverSlimmer,
+    VegaNonceInjectorSlimmer,
+  ]);
 }
 /**
  * Inject setEventSemantics to global as a public api
@@ -204,3 +212,15 @@ function applyBrandingFromClientGlobal() {
     VegaThemeManager.applyBranding(globalThis['VegaThemeManagerApplyBranding']);
   }
 }
+/**
+ * Injects the `setVegaNonce` function into the global scope as `setVegaNonce`.
+ */
+function injectSetNonceIntoGlobal() {
+  globalThis.setVegaNonce = setVegaNonce;
+}
+/**
+ * Patch document.head.insertBefore to ensure nonce is set on injected elements.
+ */
+function patchHeadInsertBeforeWithNonce() {
+  vegaNonceManager.patchHeadInsertBeforeWithNonceToStencil();
+}

package/dist/collection/helpers/chart/renderers/svg-renderer.js

@@ -15,7 +15,7 @@ export class SVGRenderer extends BaseRenderer {
       .attr('width', width)
       .attr('height', height)
       .attr('viewBox', [0, 0, width, height])
-      .attr('style', 'display:block;max-width:100%;height:auto;')
+      .property('style', 'display:block;max-width:100%;height:auto;')
       .call((g) => {
       g.append('g')
         .attr('class', 'vega-chart-draw-g')
@@ -71,7 +71,7 @@ export class SVGRenderer extends BaseRenderer {
     })
       .call((g) => {
       g.selectAll('line').attr('stroke', color);
-      g.selectAll('text').attr('style', textStyle);
+      g.selectAll('text').property('style', textStyle);
     })
       .call((g) => {
       if (direction === 'horizontal') {
@@ -104,7 +104,7 @@ export class SVGRenderer extends BaseRenderer {
     })
       .call((g) => {
       g.selectAll('line').attr('stroke-width', 2).attr('stroke', color);
-      g.selectAll('text').attr('style', textStyle);
+      g.selectAll('text').property('style', textStyle);
     })
       .call((g) => {
       if (direction !== 'horizontal') {
@@ -262,7 +262,7 @@ export class SVGRenderer extends BaseRenderer {
    */
   getTextNode(position, text, textStyle, textAnchor = 'start', rotate = 0) {
     const TextSelectionType = d3Create('svg:text')
-      .attr('style', textStyle)
+      .property('style', textStyle)
       .attr('x', position.x)
       .attr('y', position.y)
       .attr('text-anchor', textAnchor)

package/dist/collection/helpers/csp/styles-preservator.js

@@ -0,0 +1,71 @@
+import { isHTMLElement } from '../../utils/ui';
+/**
+ * StylePreservator handles CSP-compliant style management by temporarily converting
+ * inline styles to data attributes during HTML parsing operations.
+ *
+ * @example
+ * ```typescript
+ * const context = StylePreservator.preserve('<div style="color: red;">Content</div>');
+ * const safeHtml = context.getProcessedHtml();
+ * context.restore(parsedElements);
+ * ```
+ */
+export class StylePreservator {
+  /**
+   * Preserves inline styles by converting them to data attributes.
+   *
+   * @param {string} htmlString - The HTML string containing inline styles
+   * @returns {StylePreservationContext} A context object for later style restoration
+   */
+  static preserve(htmlString) {
+    const processedHtml = htmlString.replace(/\s+style=/g, ' data-style=');
+    return new StylePreservationContext(processedHtml);
+  }
+}
+/**
+ * Context class that manages the lifecycle of preserved styles.
+ */
+export class StylePreservationContext {
+  constructor(processedHtml) {
+    this.processedHtml = processedHtml;
+  }
+  /**
+   * Returns the HTML string with style attributes converted to data-style.
+   *
+   * @returns {string} The processed HTML string
+   */
+  getProcessedHtml() {
+    return this.processedHtml;
+  }
+  /**
+   * Restores data-style attributes back to style attributes.
+   *
+   * @param {HTMLElement[]} elements - Array of HTML elements to process
+   * @returns {void}
+   */
+  restore(elements) {
+    this.walkNodes(elements);
+  }
+  /**
+   * Recursively walk through nodes and restore styles
+   *
+   * @param {HTMLElement[]} elements - list of nodes
+   * @returns {void}
+   */
+  walkNodes(elements) {
+    elements.forEach((element) => {
+      if (isHTMLElement(element)) {
+        // Restore data-style back to style
+        const dataStyle = element.getAttribute('data-style');
+        if (dataStyle) {
+          element.style.cssText = dataStyle;
+          element.removeAttribute('data-style');
+        }
+        // Recursively process child nodes
+        if (element.children.length > 0) {
+          this.walkNodes(Array.from(element.children));
+        }
+      }
+    });
+  }
+}

package/dist/collection/helpers/csp/test/styles-preservator.test.js

@@ -0,0 +1,207 @@
+import { StylePreservator, StylePreservationContext } from '../styles-preservator';
+describe('StylePreservator', () => {
+  describe('preserve', () => {
+    it('should preserve styles by converting them to data-style attributes', () => {
+      // Arrange
+      const html = '<div style="color: red; font-weight: bold;">Test content</div>';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<div data-style="color: red; font-weight: bold;">Test content</div>');
+    });
+    it('should handle multiple style attributes in the same HTML string', () => {
+      // Arrange
+      const html = '<div style="color: red;"><span style="font-weight: bold;">Bold text</span></div>';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<div data-style="color: red;"><span data-style="font-weight: bold;">Bold text</span></div>');
+    });
+    it('should handle HTML without style attributes', () => {
+      // Arrange
+      const html = '<div class="test"><span>Regular text</span></div>';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<div class="test"><span>Regular text</span></div>');
+    });
+    it('should handle empty string input', () => {
+      // Arrange
+      const html = '';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('');
+    });
+    it('should handle complex nested HTML with multiple style attributes', () => {
+      // Arrange
+      const html = `
+				<div style="padding: 20px; background: white;">
+					<header style="margin-bottom: 10px;">
+						<h1 style="font-size: 24px; color: blue;">Title</h1>
+					</header>
+				</div>
+			`;
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      const expected = `
+				<div data-style="padding: 20px; background: white;">
+					<header data-style="margin-bottom: 10px;">
+						<h1 data-style="font-size: 24px; color: blue;">Title</h1>
+					</header>
+				</div>
+			`;
+      expect(result).toBe(expected);
+    });
+    it('should handle self-closing tags with style attributes', () => {
+      // Arrange
+      const html = '<img src="test.jpg" style="width: 100px; height: 100px;" alt="Test image" />';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<img src="test.jpg" data-style="width: 100px; height: 100px;" alt="Test image" />');
+    });
+  });
+  describe('StylePreservationContext', () => {
+    describe('restore', () => {
+      it('should restore data-style to style attribute for single element', () => {
+        // Arrange
+        const html = '<span data-style="font-weight: bold; color: red;">Bold text</span>';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act
+        context.restore(nodes);
+        // Assert
+        const spanElement = nodes[0];
+        expect(spanElement.style.fontWeight).toBe('bold');
+        expect(spanElement.style.color).toBe('red');
+        expect(spanElement.hasAttribute('data-style')).toBe(false);
+      });
+      it('should restore data-style to style attribute for nested elements', () => {
+        // Arrange
+        const html = `
+					<div data-style="margin: 10px;">
+						<span data-style="font-weight: bold;">Bold text</span>
+						<p data-style="color: blue;">Blue paragraph</p>
+					</div>
+				`;
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act
+        context.restore(nodes);
+        // Assert
+        const divElement = nodes[0];
+        const spanElement = divElement.querySelector('span');
+        const pElement = divElement.querySelector('p');
+        expect(divElement.style.margin).toBe('10px');
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+        expect(spanElement.style.fontWeight).toBe('bold');
+        expect(spanElement.hasAttribute('data-style')).toBe(false);
+        expect(pElement.style.color).toBe('blue');
+        expect(pElement.hasAttribute('data-style')).toBe(false);
+      });
+      it('should handle elements without data-style attributes', () => {
+        // Arrange
+        const html = '<div><span>Regular text</span><p>Normal paragraph</p></div>';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act & Assert - should not throw any errors
+        expect(() => context.restore(nodes)).not.toThrow();
+        const divElement = nodes[0];
+        const spanElement = divElement.querySelector('span');
+        const pElement = divElement.querySelector('p');
+        expect(divElement.style.cssText).toBe('');
+        expect(spanElement.style.cssText).toBe('');
+        expect(pElement.style.cssText).toBe('');
+      });
+      it('should handle empty array of nodes', () => {
+        // Arrange
+        const nodes = [];
+        const context = new StylePreservationContext('');
+        // Act & Assert - should not throw any errors
+        expect(() => context.restore(nodes)).not.toThrow();
+      });
+      it('should handle complex CSS values', () => {
+        // Arrange
+        const html = '<div data-style="background: linear-gradient(45deg, red, blue); transform: rotate(45deg);">Complex styles</div>';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act
+        context.restore(nodes);
+        // Assert
+        const divElement = nodes[0];
+        expect(divElement.style.background).toContain('linear-gradient');
+        expect(divElement.style.transform).toContain('rotate(45deg)');
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+      });
+    });
+    describe('complete workflow', () => {
+      it('should preserve and restore styles correctly', () => {
+        // Arrange
+        const originalHtml = '<div style="color: red; font-weight: bold;">Test content</div>';
+        // Act - Preserve styles
+        const context = StylePreservator.preserve(originalHtml);
+        const processedHtml = context.getProcessedHtml();
+        // Parse the processed HTML
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(processedHtml, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        // Restore styles
+        context.restore(nodes);
+        // Assert
+        expect(processedHtml).toBe('<div data-style="color: red; font-weight: bold;">Test content</div>');
+        const divElement = nodes[0];
+        expect(divElement.style.color).toBe('red');
+        expect(divElement.style.fontWeight).toBe('bold');
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+      });
+      it('should handle complex nested workflow', () => {
+        // Arrange
+        const originalHtml = `
+					<div style="padding: 20px;">
+						<h1 style="color: blue;">Title</h1>
+						<p style="text-align: center;">
+							<span style="font-weight: bold;">Bold text</span>
+						</p>
+					</div>
+				`;
+        // Act - Complete workflow
+        const context = StylePreservator.preserve(originalHtml);
+        const processedHtml = context.getProcessedHtml();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(processedHtml, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        context.restore(nodes);
+        // Assert
+        const divElement = nodes[0];
+        const h1Element = divElement.querySelector('h1');
+        const pElement = divElement.querySelector('p');
+        const spanElement = divElement.querySelector('span');
+        expect(divElement.style.padding).toBe('20px');
+        expect(h1Element.style.color).toBe('blue');
+        expect(pElement.style.textAlign).toBe('center');
+        expect(spanElement.style.fontWeight).toBe('bold');
+        // All data-style attributes should be removed
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+        expect(h1Element.hasAttribute('data-style')).toBe(false);
+        expect(pElement.hasAttribute('data-style')).toBe(false);
+        expect(spanElement.hasAttribute('data-style')).toBe(false);
+      });
+    });
+  });
+});