@hmcts/media-viewer 4.2.0 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/toolbar/redaction-search-bar/redaction-search-bar.component.spec.ts

@@ -0,0 +1,291 @@
+import { RpxTranslationModule } from 'rpx-xui-translation';
+
+import { ComponentFixture, TestBed, fakeAsync, tick, flush, inject } from '@angular/core/testing';
+import { RedactionSearchBarComponent } from './redaction-search-bar.component';
+import { HighlightCreateService } from '../../annotations/annotation-set/annotation-create/highlight-create/highlight-create.service';
+import { SearchMode, SearchResultsCount, SearchType, ToolbarEventService } from '../toolbar-event.service';
+import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
+import { Subject, of, BehaviorSubject } from 'rxjs';
+import { RedactionSearch } from './redaction-search.model';
+import { Store, StoreModule } from '@ngrx/store';
+import { reducers } from '../../store/reducers/reducers';
+import { Rectangle } from '../../annotations/annotation-set/annotation-view/rectangle/rectangle.model';
+import { ElementRef } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+describe('RedactionSearchBarComponent', () => {
+  let component: RedactionSearchBarComponent;
+  let fixture: ComponentFixture<RedactionSearchBarComponent>;
+  const redactionSerachSubject: Subject<RedactionSearch> = new Subject<RedactionSearch>();
+  const searchResultsCountSubject: Subject<SearchResultsCount> = new Subject<SearchResultsCount>();
+  const openRedactionSearch: BehaviorSubject<SearchMode | null> = new BehaviorSubject<SearchMode | null>(null);
+  const mockHighlightService = { saveAnnotationSet: () => { }, applyRotation: () => { } };
+  const mockStore = {
+    select: () => of([{
+      styles: { height: 100, width: 100 },
+      scaleRotation: { scale: 1, rotation: 0 }
+    }]),
+    dispatch: (actualAction) => { },
+    pipe: () => of({ annotationSetId: 'annotationSetId', documentId: 'documentId' })
+  } as any;
+  let nativeElement, searchInput;
+
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RedactionSearchBarComponent],
+      imports: [
+        StoreModule.forRoot({}),
+        StoreModule.forFeature('media-viewer', reducers),
+        FormsModule,
+        RpxTranslationModule.forRoot({
+          baseUrl: '',
+          debounceTimeMs: 300,
+          validity: {
+            days: 1
+          },
+          testMode: true
+        })
+      ],
+      providers: [
+        {
+          provide: HighlightCreateService,
+          useValue: mockHighlightService
+        },
+        {
+          provide: ToolbarEventService, useValue: {
+            redactionSerachSubject: redactionSerachSubject.asObservable(),
+            searchResultsCountSubject: searchResultsCountSubject.asObservable(),
+            openRedactionSearch: openRedactionSearch.asObservable(),
+            redactAllInProgressSubject: { next: () => { }, asObservable: () => { }, subscribe: () => { } },
+            searchBarHidden: { next: () => { } },
+            search: () => { },
+          }
+        },
+        ToolbarButtonVisibilityService,
+        { provide: Store, useValue: mockStore }
+      ]
+    })
+      .compileComponents();
+    fixture = TestBed.createComponent(RedactionSearchBarComponent);
+    component = fixture.componentInstance;
+    openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: true } as SearchMode);
+    fixture.detectChanges();
+    component.allPages = {
+      2: {
+        numberOfPages: 2,
+        styles: { left: '100', height: '100', width: '100' },
+        scaleRotation: { scale: '100', rotation: '100' },
+        viewportScale: 1
+      }
+    };
+    nativeElement = fixture.debugElement.nativeElement;
+
+
+    fixture.detectChanges();
+  });
+
+
+  it('should search with reset set to true', inject([Store], (store) => {
+    spyOn(component.toolbarEvents, 'search');
+    spyOn(store, 'dispatch');
+    component.search(true);
+    expect(component.toolbarEvents.search).toHaveBeenCalledTimes(1);
+    expect(component.redactAll).toBeFalse();
+  }));
+
+  it('should search with reset set false', inject([Store], (store) => {
+    spyOn(component.toolbarEvents, 'search');
+    spyOn(component.toolbarEvents.redactAllInProgressSubject, 'next');
+    component.search(false);
+    expect(component.toolbarEvents.search).toHaveBeenCalledTimes(1);
+    expect(component.redactAll).toBeTrue();
+    expect(component.redactElements).toEqual([]);
+  }));
+
+  it('should redact all search text', inject([Store], fakeAsync((store) => {
+    const redactionSearch: RedactionSearch = {
+      matchedIndex: 1,
+      matchesCount: 1,
+      page: 1
+    };
+    component.redactAll = true;
+    const htmlElement = jasmine.createSpyObj<HTMLElement>('HTMLElement', ['getBoundingClientRect'], { parentElement: null });
+    const htmlElement2 = jasmine.createSpyObj<HTMLElement>('HTMLElement', ['getBoundingClientRect'], { parentElement: htmlElement });
+    const element = jasmine.createSpyObj<Element>('Element', ['getBoundingClientRect'], { parentElement: htmlElement2 });
+    spyOn(document, 'getElementsByClassName').withArgs('highlight selected').and.returnValue([element] as any);
+    const range = jasmine.createSpyObj<Range>('Range', ['setStart', 'setEnd', 'getBoundingClientRect', 'cloneRange', 'selectNodeContents']);
+    spyOn(document, 'createRange').and.returnValue(range);
+    const selection = jasmine.createSpyObj<Selection>('Selection', ['addRange', 'getRangeAt', 'removeAllRanges'],
+      { rangeCount: 1, isCollapsed: false });
+
+    const range2 = jasmine.createSpyObj<Range>('Range', ['setStart', 'setEnd', 'getBoundingClientRect', 'cloneRange', 'selectNodeContents', 'getClientRects']);
+    selection.getRangeAt.and.returnValue(range2);
+    range2.cloneRange.and.returnValue(range2);
+    const domRect = jasmine.createSpyObj<DOMRect>('DOMRect', [], { x: 100, y: 100, height: 100, width: 100 });
+    range2.getClientRects.and.returnValue([domRect] as any);
+    htmlElement.getBoundingClientRect.and.returnValue(domRect);
+    spyOn(window, 'getSelection').and.returnValue(selection);
+
+    spyOn(mockHighlightService, 'applyRotation').and.returnValue({ x: 100, y: 100, height: 100, width: 100 } as any);
+    spyOn(store, 'dispatch').and.callThrough();
+
+
+    redactionSerachSubject.next(redactionSearch);
+    tick(100);
+
+
+    expect(component.redactAllText).toBeNull();
+    expect(component.redactAll).toBeFalse();
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+  })));
+
+
+  it('should highlight all search text', inject([Store], fakeAsync((store) => {
+    openRedactionSearch.next({ modeType: SearchType.Highlight, isOpen: true } as SearchMode);
+    const redactionSearch: RedactionSearch = {
+      matchedIndex: 1,
+      matchesCount: 1,
+      page: 1
+    };
+    component.redactAll = true;
+    const htmlElement = jasmine.createSpyObj<HTMLElement>('HTMLElement', ['getBoundingClientRect'], { parentElement: null });
+    const htmlElement2 = jasmine.createSpyObj<HTMLElement>('HTMLElement', ['getBoundingClientRect'], { parentElement: htmlElement });
+    const element = jasmine.createSpyObj<Element>('Element', ['getBoundingClientRect'], { parentElement: htmlElement2 });
+    spyOn(document, 'getElementsByClassName').withArgs('highlight selected').and.returnValue([element] as any);
+    const range = jasmine.createSpyObj<Range>('Range', ['setStart', 'setEnd', 'getBoundingClientRect', 'cloneRange', 'selectNodeContents']);
+    spyOn(document, 'createRange').and.returnValue(range);
+    const selection = jasmine.createSpyObj<Selection>('Selection', ['addRange', 'getRangeAt', 'removeAllRanges'],
+      { rangeCount: 1, isCollapsed: false });
+
+    const range2 = jasmine.createSpyObj<Range>('Range', ['setStart', 'setEnd', 'getBoundingClientRect', 'cloneRange', 'selectNodeContents', 'getClientRects']);
+    selection.getRangeAt.and.returnValue(range2);
+    range2.cloneRange.and.returnValue(range2);
+    const domRect = jasmine.createSpyObj<DOMRect>('DOMRect', [], { x: 100, y: 100, height: 100, width: 100 });
+    range2.getClientRects.and.returnValue([domRect] as any);
+    htmlElement.getBoundingClientRect.and.returnValue(domRect);
+    spyOn(window, 'getSelection').and.returnValue(selection);
+
+    spyOn(mockHighlightService, 'applyRotation').and.returnValue({ x: 100, y: 100, height: 100, width: 100 } as any);
+    spyOn(mockHighlightService, 'saveAnnotationSet').and.callThrough();
+
+
+    redactionSerachSubject.next(redactionSearch);
+    tick(100);
+
+
+    expect(component.redactAllText).toBeNull();
+    expect(component.redactAll).toBeFalse();
+    expect(mockHighlightService.saveAnnotationSet).toHaveBeenCalledTimes(1);
+  })));
+
+  it('should redact search text if does not already exists', inject([Store], fakeAsync((store) => {
+    const redactionSearch: RedactionSearch = {
+      matchedIndex: 1,
+      matchesCount: 1,
+      page: 1
+    };
+    component.redactAll = true;
+
+    component.redactElements = [{
+      page: 2,
+      matchedIndex: 1,
+      rectangles: [{ x: 100, y: 100, height: 100, width: 100, annotationId: 'annotationId' } as Rectangle]
+    }];
+    const htmlElement = jasmine.createSpyObj<HTMLElement>('HTMLElement', ['getBoundingClientRect'], { parentElement: null });
+    const htmlElement2 = jasmine.createSpyObj<HTMLElement>('HTMLElement', ['getBoundingClientRect'], { parentElement: htmlElement });
+    const element = jasmine.createSpyObj<Element>('Element', ['getBoundingClientRect'], { parentElement: htmlElement2 });
+    spyOn(document, 'getElementsByClassName').withArgs('highlight selected').and.returnValue([element] as any);
+    const range = jasmine.createSpyObj<Range>('Range', ['setStart', 'setEnd', 'getBoundingClientRect', 'cloneRange', 'selectNodeContents']);
+    spyOn(document, 'createRange').and.returnValue(range);
+    const selection = jasmine.createSpyObj<Selection>('Selection', ['addRange', 'getRangeAt', 'removeAllRanges'],
+      { rangeCount: 1, isCollapsed: false });
+
+    const range2 = jasmine.createSpyObj<Range>('Range', ['setStart', 'setEnd', 'getBoundingClientRect', 'cloneRange', 'selectNodeContents', 'getClientRects']);
+    selection.getRangeAt.and.returnValue(range2);
+    range2.cloneRange.and.returnValue(range2);
+    const domRect = jasmine.createSpyObj<DOMRect>('DOMRect', [], { x: 100, y: 100, height: 100, width: 100 });
+    range2.getClientRects.and.returnValue([domRect] as any);
+    htmlElement.getBoundingClientRect.and.returnValue(domRect);
+    spyOn(window, 'getSelection').and.returnValue(selection);
+
+    spyOn(mockHighlightService, 'applyRotation').and.returnValue({ x: 100, y: 100, height: 100, width: 100 } as any);
+    spyOn(store, 'dispatch').and.callThrough();
+
+
+    redactionSerachSubject.next(redactionSearch);
+    tick(100);
+
+
+    expect(component.redactAllText).toBeNull();
+    expect(component.redactAll).toBeFalse();
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+  })));
+
+  it('should close the searchbar on escape', fakeAsync(() => {
+
+    component.toolbarEvents.searchBarHidden.next(true);
+    tick(200);
+    component.findInput = jasmine.createSpyObj<ElementRef>('ElementRef', ['nativeElement']);
+    component.findInput.nativeElement = jasmine.createSpyObj<HTMLInputElement>('HTMLInputElement', ['focus', 'dispatchEvent']);
+    searchInput = component.findInput.nativeElement;
+    fixture.detectChanges();
+
+    const searchbar = nativeElement.querySelector('.searchbar');
+    expect(searchbar.getAttribute('hidden')).toBeNull();
+
+    const event = new KeyboardEvent('keydown', { 'key': 'Escape' });
+    searchInput.dispatchEvent(event);
+    fixture.detectChanges();
+
+    expect(searchbar.getAttribute('hidden')).toBeDefined();
+  }));
+
+  it('searchbar on F3', fakeAsync(() => {
+
+    const searchBarHiddenSpy = spyOn(component.toolbarEvents.searchBarHidden, 'next').and.callThrough();
+
+    component.findInput = jasmine.createSpyObj<ElementRef>('ElementRef', ['nativeElement']);
+    component.findInput.nativeElement = jasmine.createSpyObj<HTMLInputElement>('HTMLInputElement', ['focus', 'dispatchEvent']);
+    searchInput = component.findInput.nativeElement;
+    fixture.detectChanges();
+    const searchbar = nativeElement.querySelector('.searchbar');
+    expect(searchbar.getAttribute('hidden')).toBeNull();
+
+    const event = new KeyboardEvent('keydown', { code: 'F3' });
+    tick(200);
+    component.onWindowKeyDown(event);
+    fixture.detectChanges();
+
+    expect(searchBarHiddenSpy).toHaveBeenCalled();
+    flush();
+  }));
+
+  it('should show search results count', fakeAsync(() => {
+
+    const searchResultsCount = { current: 1, total: 1, isPrevious: false };
+    searchResultsCountSubject.next(searchResultsCount);
+    fixture.detectChanges();
+
+    expect(component.resultCount).toEqual(searchResultsCount.total);
+    expect(component.resultsText).toEqual(`${searchResultsCount.total} results founds`);
+  }));
+
+  it('should set highlight text', fakeAsync(() => {
+    component.inProgressText = '';
+    component.titleText = '';
+    component.searchType = SearchType.Highlight;
+    component.modeText();
+    expect(component.inProgressText).toEqual('Highlighting');
+    expect(component.titleText).toEqual('Highlight');
+  }));
+
+  it('should set redact text', fakeAsync(() => {
+    component.inProgressText = '';
+    component.titleText = '';
+    component.searchType = SearchType.Redact;
+    component.modeText();
+    expect(component.inProgressText).toEqual('Redacting');
+    expect(component.titleText).toEqual('Redact');
+  }));
+});

package/projects/media-viewer/src/lib/toolbar/redaction-search-bar/redaction-search-bar.component.ts

@@ -0,0 +1,289 @@
+import { BulkRedaction, Redaction } from './../../redaction/services/redaction.model';
+import { SearchMode, SearchResultsCount, SearchType } from './../toolbar-event.service';
+import { RedactionSearch, RedactRectangle } from './redaction-search.model';
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
+import { ToolbarEventService } from '../toolbar-event.service';
+import { Store, select } from '@ngrx/store';
+import * as fromStore from '../../store/reducers/reducers';
+import { Rectangle } from '../../annotations/annotation-set/annotation-view/rectangle/rectangle.model';
+import * as fromDocument from '../../store/selectors/document.selectors';
+import * as fromRedactionActions from '../../store/actions/redaction.actions';
+import { v4 as uuid } from 'uuid';
+import { HighlightCreateService } from '../../annotations/annotation-set/annotation-create/highlight-create/highlight-create.service';
+import { some } from 'lodash';
+import { HtmlTemplatesHelper } from '../../shared/util/helpers/html-templates.helper';
+
+@Component({
+    selector: 'mv-redaction-search-bar',
+    templateUrl: './redaction-search-bar.component.html',
+    styleUrls: ['./redaction-search-bar.component.scss'],
+    standalone: false
+})
+export class RedactionSearchBarComponent implements OnInit, OnDestroy {
+
+  @ViewChild('findInput', { static: true }) findInput: ElementRef<HTMLInputElement>;
+
+  highlightAll = true;
+  matchCase = false;
+  wholeWord = false;
+  resultsText = '';
+  searchText = '';
+  resultCount = 0;
+  redactElements: RedactRectangle[] = [];
+  pageHeight: number;
+  pageWidth: number;
+  zoom: number;
+  rotate: number;
+  allPages: object;
+  redactAll: boolean;
+  openSearchModal: boolean;
+  redactAllInProgress: boolean;
+  redactAllText?: string;
+  searchType: SearchType;
+  inProgressText: string;
+  titleText: string;
+
+
+  private subscription: Subscription;
+  private documentId: string;
+  public advancedSearchVisible = false;
+
+
+  constructor(
+    private store: Store<fromStore.State>,
+    public readonly toolbarButtons: ToolbarButtonVisibilityService,
+    public readonly toolbarEvents: ToolbarEventService,
+    public readonly highlightService: HighlightCreateService,
+  ) { }
+
+  public ngOnInit(): void {
+    this.subscription = this.toolbarEvents.redactionSerachSubject.subscribe((results: RedactionSearch) => this.redactAllSearched(results));
+    this.subscription.add(this.store.pipe(select(fromDocument.getDocumentId)).subscribe(docId => this.documentId = docId));
+    this.subscription.add(this.store.pipe(select(fromDocument.getPages)).subscribe((pages) => {
+      if (pages[1]) {
+        this.allPages = pages;
+      }
+    }));
+    this.subscription.add(
+      this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results))
+    );
+    this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe((searchMode: SearchMode) => {
+      if (searchMode) {
+        this.openSearchModal = searchMode.isOpen;
+        this.searchType = searchMode.modeType;
+        this.modeText();
+      }
+    }));
+    this.subscription.add(this.toolbarEvents.redactAllInProgressSubject
+      .subscribe(inProgress => this.redactAllInProgress = inProgress));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  public onWindowKeyDown(e: KeyboardEvent): void {
+    if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
+      e.preventDefault();
+      this.toolbarEvents.searchBarHidden.next(false);
+      setTimeout(() => this.findInput.nativeElement.focus(), 200);
+    }
+  }
+
+  search(reset: boolean = true): void {
+    this.redactAll = !reset;
+    if (this.redactAll) {
+      this.toolbarEvents.redactAllInProgressSubject.next(true);
+    }
+    if (reset) {
+      this.redactElements = [];
+    }
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: false,
+      reset
+    });
+  }
+
+  modeText(): void {
+    if (this.searchType === SearchType.Highlight) {
+      this.inProgressText = 'Highlighting';
+      this.titleText = 'Highlight';
+    } else if (this.searchType === SearchType.Redact) {
+      this.inProgressText = 'Redacting';
+      this.titleText = 'Redact';
+    }
+  }
+
+  private saveRedaction(redactRectangle: RedactRectangle[]) {
+    const redaction = redactRectangle.map(ele => {
+      return { page: ele.page, rectangles: ele.rectangles, redactionId: uuid(), documentId: this.documentId } as Redaction;
+    });
+    this.store.dispatch(new fromRedactionActions.SaveBulkRedaction({ searchRedactions: redaction } as BulkRedaction));
+  }
+
+  private existInRedactElements(pageNumber: number, matechedIndex: number, rectangles: Rectangle[]): boolean {
+    if (this.redactElements && this.redactElements.length > 0) {
+      const pagesFound = this.redactElements.find(re => re.page === pageNumber && re.matchedIndex === matechedIndex);
+      const pageRectangles = pagesFound?.rectangles;
+      if (!pageRectangles || pageRectangles.length <= 0) {
+        return false;
+      }
+      let matchesRectangles = 0;
+      for (let rectIndx = 0; rectIndx < pageRectangles.length; rectIndx++) {
+        const rectangle = pageRectangles[rectIndx];
+        const foundRectangle = rectangles.find(re => re.width === rectangle.width &&
+          re.height === rectangle.height && re.x === rectangle.x && re.y === rectangle.y);
+        if (foundRectangle) {
+          matchesRectangles++;
+        }
+      }
+      return pageRectangles.length === matchesRectangles;
+    }
+    return false;
+  }
+
+  onCloseSearchModal() {
+    this.toolbarEvents.openRedactionSearch.next({ isOpen: false, modeType: this.searchType });
+  }
+
+
+  private setSearchResultsCount(results: SearchResultsCount): void {
+    this.resultCount = results.total;
+    this.resultsText = this.resultCount > 0
+      ? `${results.total} results founds`
+      : 'No results found';
+  }
+
+  private redactAllSearched(results: RedactionSearch): void {
+    const $this = this;
+    const intervalId = setInterval(() => {
+      const highlightElement = document.getElementsByClassName('highlight selected');
+      if (highlightElement && highlightElement.length > 0) {
+        clearInterval(intervalId);
+        $this.redactAllSearchedTick(results);
+      }
+    }, 100);
+  }
+
+
+  private redactAllSearchedTick(results: RedactionSearch): void {
+    const highlightElement = document.getElementsByClassName('highlight selected');
+    if (highlightElement && highlightElement.length > 0) {
+      this.resultCount = results.matchesCount;
+      const pageNumber = results.page + 1;
+      const rectangles = this.getRectangles(pageNumber);
+      if (rectangles && this.redactElements.length <= this.resultCount
+        && !this.existInRedactElements(pageNumber, results.matchedIndex, rectangles)) {
+        this.redactElements.push({ page: pageNumber, matchedIndex: results?.matchedIndex, rectangles } as RedactRectangle);
+        this.CreateRedactAllText();
+      }
+      if (this.redactAll && this.resultCount && this.resultCount > 0
+        && rectangles && this.redactElements.length < this.resultCount) {
+        this.search(false);
+      }
+
+      if (this.redactAll && this.resultCount && this.redactElements.length === this.resultCount) {
+        this.redactAll = false;
+        this.redactAllText = null;
+        if (this.searchType === SearchType.Redact) {
+          this.saveRedaction(this.redactElements);
+        } else if (this.searchType === SearchType.Highlight) {
+          this.highlightService.saveAnnotationSet(this.redactElements);
+          this.cleanUpPostSave();
+        }
+      }
+    }
+  }
+
+  private cleanUpPostSave() {
+    this.toolbarEvents.redactAllInProgressSubject.next(false);
+    this.searchText = '';
+    this.search();
+  }
+
+  private CreateRedactAllText() {
+    this.redactAllText = `${this.redactElements.length} of ${this.resultCount}`;
+  }
+
+  public onEscapeKeyPress(e: KeyboardEvent): void {
+    this.toolbarEvents.searchBarHidden.next(true);
+  }
+
+  public onEnterKeyPress(e: KeyboardEvent): void {
+    this.search();
+  }
+
+  public toggleSearchBar() {
+    this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+  }
+
+  private getRectangles(page: number): Rectangle[] {
+    this.pageHeight = this.allPages[page].styles.height;
+    this.pageWidth = this.allPages[page].styles.width;
+    this.zoom = parseFloat(this.allPages[page].scaleRotation.scale);
+    this.rotate = parseInt(this.allPages[page].scaleRotation.rotation, 10);
+    const selectedHighLightedElements = document.getElementsByClassName('highlight selected');
+    if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
+      const docRange = document.createRange();
+      if (some(selectedHighLightedElements, element => element.className === 'highlight begin selected' || element.className === 'highlight end selected')) {
+        docRange.setStart(selectedHighLightedElements[0], 0);
+        const endNode = selectedHighLightedElements[selectedHighLightedElements.length - 1];
+        docRange.setEnd(endNode, endNode.childNodes.length);
+      }
+      else {
+        docRange.selectNodeContents(selectedHighLightedElements[0] as HTMLElement);
+      }
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(docRange);
+      if (selection.rangeCount && !selection.isCollapsed) {
+        const range = selection.getRangeAt(0).cloneRange();
+        const clientRects = range.getClientRects();
+
+        if (clientRects) {
+          const parentRect = HtmlTemplatesHelper.getAdjustedBoundingRect(selectedHighLightedElements[0]?.parentElement?.parentElement);
+          const selectionRectangles: Rectangle[] = [];
+          for (let i = 0; i < clientRects.length; i++) {
+            const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
+            const findSelecttionRectangle = selectionRectangles.find(
+              (rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x
+            );
+            if (!findSelecttionRectangle) {
+              selectionRectangles.push(selectionRectangle);
+            }
+          }
+
+          return selectionRectangles;
+        }
+      }
+    }
+  }
+
+  private createTextRectangle(rect: DOMRect, parentRect: any): Rectangle {
+    const height = rect.bottom - rect.top;
+    const width = rect.right - rect.left;
+    const top = rect.top - parentRect.top;
+    const left = rect.left - parentRect.left;
+
+    let rectangle = this.highlightService.applyRotation(
+      this.pageHeight,
+      this.pageWidth,
+      height,
+      width,
+      top,
+      left,
+      this.rotate,
+      this.zoom
+    );
+    rectangle = { id: uuid(), ...rectangle };
+
+    return rectangle as Rectangle;
+  }
+}

package/projects/media-viewer/src/lib/toolbar/redaction-search-bar/redaction-search.model.ts

@@ -0,0 +1,13 @@
+import { Rectangle } from '../../annotations/annotation-set/annotation-view/rectangle/rectangle.model';
+
+export interface RedactionSearch {
+  page?: number;
+  matchedIndex?: number;
+  matchesCount?: number;
+}
+
+export interface RedactRectangle {
+  page?: number;
+  matchedIndex?: number;
+  rectangles?: Rectangle[];
+}