Add highlighting for built-in viewer

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -28,7 +28,8 @@
             [original-size]="false"
             [show-borders]="false"
             [show-all]="true"
-            (error)="onError($event)">
+            (text-layer-rendered)="onViewerLoaded()"
+            (error)="onError($event)" #pdfViewer>
           </pdf-viewer>
         }
       }

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -158,4 +158,24 @@ describe('PreviewPopupComponent', () => {
     jest.advanceTimersByTime(1)
     expect(component.popover.isOpen()).toBeFalsy()
   })
+
+  it('should dispatch find event on viewer loaded if searchQuery set', () => {
+    documentService.searchQuery = 'test'
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    component.popover.open()
+    jest.advanceTimersByTime(1000)
+    fixture.detectChanges()
+    // normally setup by pdf-viewer
+    jest.replaceProperty(component.pdfViewer, 'eventBus', {
+      dispatch: jest.fn(),
+    } as any)
+    const dispatchSpy = jest.spyOn(component.pdfViewer.eventBus, 'dispatch')
+    component.onViewerLoaded()
+    expect(dispatchSpy).toHaveBeenCalledWith('find', {
+      query: 'test',
+      caseSensitive: false,
+      highlightAll: true,
+      phraseSearch: true,
+    })
+  })
 })

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http'
 import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { PdfViewerModule } from 'ng2-pdf-viewer'
+import { PdfViewerComponent, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
@@ -57,6 +57,8 @@ export class PreviewPopupComponent implements OnDestroy {
 
   @ViewChild('popover') popover: NgbPopover
 
+  @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent
+
   mouseOnPreview: boolean = false
 
   popoverClass: string = 'shadow popover-preview'
@@ -114,6 +116,17 @@ export class PreviewPopupComponent implements OnDestroy {
     }
   }
 
+  onViewerLoaded() {
+    if (this.documentService.searchQuery) {
+      this.pdfViewer.eventBus.dispatch('find', {
+        query: this.documentService.searchQuery,
+        caseSensitive: false,
+        highlightAll: true,
+        phraseSearch: true,
+      })
+    }
+  }
+
   get previewUrl() {
     return this.documentService.getPreviewUrl(this.document.id)
   }