Fixhancement: restore search highlighting and add for built-in viewer (#8885)

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)="onPageRendered()"
+            (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.onPageRendered()
+    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,18 @@ export class PreviewPopupComponent implements OnDestroy {
     }
   }
 
+  onPageRendered() {
+    // Only triggered by the pngx pdf viewer
+    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)
   }

src-ui/src/app/services/rest/document.service.spec.ts

@@ -276,7 +276,7 @@ describe(`DocumentService`, () => {
     service.searchQuery = searchQuery
     let url = service.getPreviewUrl(documents[0].id)
     expect(url).toEqual(
-      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/preview/#search="${searchQuery}"`
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/preview/#search=%22${searchQuery}%22`
     )
   })
 

src-ui/src/app/services/rest/document.service.ts

@@ -222,12 +222,12 @@ export class DocumentService extends AbstractPaperlessService<Document> {
   }
 
   getPreviewUrl(id: number, original: boolean = false): string {
-    let url = this.getResourceUrl(id, 'preview')
-    if (this._searchQuery) url += `#search="${this._searchQuery}"`
+    let url = new URL(this.getResourceUrl(id, 'preview'))
+    if (this._searchQuery) url.hash = `#search="${this.searchQuery}"`
     if (original) {
-      url += '?original=true'
+      url.searchParams.append('original', 'true')
     }
-    return url
+    return url.toString()
   }
 
   getThumbUrl(id: number): string {
@@ -309,6 +309,10 @@ export class DocumentService extends AbstractPaperlessService<Document> {
   }
 
   public set searchQuery(query: string) {
-    this._searchQuery = query
+    this._searchQuery = query.trim()
+  }
+
+  public get searchQuery(): string {
+    return this._searchQuery
   }
 }