@hmcts/media-viewer 4.2.38-innerhtml-security-update → 4.2.38

package/fesm2022/hmcts-media-viewer.mjs

@@ -3353,55 +3353,26 @@ class TextHighlightDirective {
     highlightInputText(textToHighlight) {
         this.resetHighlight();
         this.textToHighlight = textToHighlight;
-        const searchPattern = new RegExp(this.escapeRegExp(textToHighlight), 'gi');
+        const searchPattern = new RegExp(textToHighlight, 'gi');
         const hostElement = this.element.nativeElement;
-        this.highlightTextNodes(hostElement, searchPattern);
+        if (hostElement.innerHTML.match(searchPattern)) {
+            hostElement.innerHTML = hostElement.innerHTML
+                .replace(searchPattern, this.highlightPattern('$&'));
+        }
         this.textToHighlight = undefined;
     }
     resetHighlight() {
         const hostElement = this.element.nativeElement;
-        Array.from(hostElement.querySelectorAll('span.mvTextHighlight')).forEach((highlightElement) => {
-            highlightElement.replaceWith(document.createTextNode(highlightElement.textContent || ''));
-        });
-        hostElement.normalize();
-    }
-    highlightTextNodes(hostElement, searchPattern) {
-        const walker = document.createTreeWalker(hostElement, NodeFilter.SHOW_TEXT);
-        const textNodes = [];
-        let currentNode = walker.nextNode();
-        while (currentNode) {
-            textNodes.push(currentNode);
-            currentNode = walker.nextNode();
-        }
-        textNodes.forEach((textNode) => this.highlightTextNode(textNode, searchPattern));
-    }
-    highlightTextNode(textNode, searchPattern) {
-        const text = textNode.textContent || '';
-        const matches = Array.from(text.matchAll(searchPattern));
-        if (matches.length === 0) {
-            return;
-        }
-        const fragment = document.createDocumentFragment();
-        let currentIndex = 0;
-        matches.forEach((match) => {
-            const matchIndex = match.index || 0;
-            const matchText = match[0];
-            if (matchIndex > currentIndex) {
-                fragment.appendChild(document.createTextNode(text.slice(currentIndex, matchIndex)));
+        const searchPattern = new RegExp(this.highlightPattern('(.*?)'), 'gi');
+        while (hostElement.innerHTML.match(searchPattern)) {
+            const matchGroups = searchPattern.exec(hostElement.innerHTML);
+            if (matchGroups) {
+                hostElement.innerHTML = hostElement.innerHTML.replace(matchGroups[0], matchGroups[1]);
             }
-            const highlightElement = document.createElement('span');
-            highlightElement.className = 'mvTextHighlight';
-            highlightElement.textContent = matchText;
-            fragment.appendChild(highlightElement);
-            currentIndex = matchIndex + matchText.length;
-        });
-        if (currentIndex < text.length) {
-            fragment.appendChild(document.createTextNode(text.slice(currentIndex)));
         }
-        textNode.replaceWith(fragment);
     }
-    escapeRegExp(value) {
-        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    highlightPattern(dynamicText) {
+        return '<span class="mvTextHighlight">' + dynamicText + '</span>';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: TextHighlightDirective, isStandalone: false, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 }); }
@@ -7972,14 +7943,12 @@ class GovUkLabelComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GovUkLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: GovUkLabelComponent, isStandalone: false, selector: "mv-gov-label", inputs: { config: "config" }, ngImport: i0, template: `<h1 *ngIf="config.isPageHeading else noHeading">
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id">
-            {{ config.label }}
+                 [for]="config.id" [innerHTML]="config.label">
           </label>
         </h1>
         <ng-template #noHeading>
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id">
-            {{ config.label }}
+                 [for]="config.id" [innerHTML]="config.label">
           </label>
         </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -7990,14 +7959,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     selector: 'mv-gov-label',
                     template: `<h1 *ngIf="config.isPageHeading else noHeading">
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id">
-            {{ config.label }}
+                 [for]="config.id" [innerHTML]="config.label">
           </label>
         </h1>
         <ng-template #noHeading>
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id">
-            {{ config.label }}
+                 [for]="config.id" [innerHTML]="config.label">
           </label>
         </ng-template>
   `,