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

package/fesm2022/hmcts-media-viewer.mjs

@@ -2065,8 +2065,8 @@ class HighlightCreateDirective {
         }
         this.setPageProperties(page);
         const range = selection.getRangeAt(0).cloneRange();
-        const clientRects = range.getClientRects();
-        if (!clientRects || clientRects.length === 0) {
+        const selectionRects = this.getSelectionRectangles(range);
+        if (!selectionRects || selectionRects.length === 0) {
             return [];
         }
         let textLayerElement = range.startContainer;
@@ -2078,7 +2078,7 @@ class HighlightCreateDirective {
             return [];
         }
         this.removeEnhancedTextModeStyling(textLayerElement);
-        return this.processClientRects(clientRects, textLayer);
+        return this.processClientRects(selectionRects, textLayer);
     }
     onPdfViewerClick(event) {
         this.store.dispatch(new SelectedAnnotation({
@@ -2096,14 +2096,23 @@ class HighlightCreateDirective {
             this.removeEnhancedTextModeStyling(localElement);
             if (selection.rangeCount && !selection.isCollapsed) {
                 const range = selection.getRangeAt(0).cloneRange();
-                const clientRects = range.getClientRects();
-                if (clientRects) {
+                const selectionRects = this.getSelectionRectangles(range);
+                if (selectionRects) {
                     const textLayer = localElement.closest(".textLayer");
-                    return this.processClientRects(clientRects, textLayer);
+                    return this.processClientRects(selectionRects, textLayer);
                 }
             }
         }
     }
+    getSelectionRectangles(range) {
+        if (this.toolbarEvents.redactionMode.getValue()) {
+            const boundingRect = range.getBoundingClientRect();
+            if (boundingRect && boundingRect.width > 0 && boundingRect.height > 0) {
+                return [boundingRect];
+            }
+        }
+        return range.getClientRects();
+    }
     createTextRectangle(rect, parentRect) {
         const height = rect.bottom - rect.top;
         const width = rect.right - rect.left;
@@ -3353,55 +3362,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 +7952,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 +7968,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>
   `,