Enhancement: directly render plaintext in previews

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

@@ -5,7 +5,11 @@
     </div>
   } @else {
     @if (renderAsObject) {
-      <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf" [class.pdf]="isPdf"></object>
+      @if (previewText) {
+        <div class="preview-sticky bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText}}</div>
+      } @else {
+        <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
+      }
     } @else {
       @if (requiresPassword) {
         <div class="w-100 h-100 position-relative">

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

@@ -9,7 +9,12 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { PdfViewerModule } from 'ng2-pdf-viewer'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http'
+import { of, throwError } from 'rxjs'
 
 const doc = {
   id: 10,
@@ -23,6 +28,7 @@ describe('PreviewPopupComponent', () => {
   let fixture: ComponentFixture<PreviewPopupComponent>
   let settingsService: SettingsService
   let documentService: DocumentService
+  let http: HttpClient
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -35,6 +41,7 @@ describe('PreviewPopupComponent', () => {
     })
     settingsService = TestBed.inject(SettingsService)
     documentService = TestBed.inject(DocumentService)
+    http = TestBed.inject(HttpClient)
     jest
       .spyOn(documentService, 'getPreviewUrl')
       .mockImplementation((id) => doc.original_file_name)
@@ -95,4 +102,17 @@ describe('PreviewPopupComponent', () => {
       'Error loading preview'
     )
   })
+
+  it('should get text content from http if appropriate', () => {
+    const httpSpy = jest.spyOn(http, 'get')
+    httpSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error getting preview'))
+    )
+    component.init()
+    expect(httpSpy).toHaveBeenCalled()
+    expect(component.error).toBeTruthy()
+    httpSpy.mockReturnValueOnce(of('Preview text'))
+    component.init()
+    expect(component.previewText).toEqual('Preview text')
+  })
 })

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

@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { Component, Input, OnDestroy } from '@angular/core'
+import { first, Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { DocumentService } from 'src/app/services/rest/document.service'
@@ -9,14 +11,26 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './preview-popup.component.html',
   styleUrls: ['./preview-popup.component.scss'],
 })
-export class PreviewPopupComponent {
+export class PreviewPopupComponent implements OnDestroy {
+  private _document: Document
   @Input()
-  document: Document
+  set document(document: Document) {
+    this._document = document
+    this.init()
+  }
+
+  get document(): Document {
+    return this._document
+  }
+
+  unsubscribeNotifier: Subject<any> = new Subject()
 
   error = false
 
   requiresPassword: boolean = false
 
+  previewText: string
+
   get renderAsObject(): boolean {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
   }
@@ -39,9 +53,28 @@ export class PreviewPopupComponent {
 
   constructor(
     private settingsService: SettingsService,
-    private documentService: DocumentService
+    private documentService: DocumentService,
+    private http: HttpClient
   ) {}
 
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(this)
+  }
+
+  init() {
+    this.http
+      .get(this.previewURL, { responseType: 'text' })
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (res) => {
+          this.previewText = res.toString()
+        },
+        error: (err) => {
+          this.error = err
+        },
+      })
+  }
+
   onError(event: any) {
     if (event.name == 'PasswordException') {
       this.requiresPassword = true

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -62,7 +62,3 @@ textarea.rtl {
   height: 100%;
   object-fit: contain;
 }
-
-.whitespace-preserve {
-  white-space: preserve;
-}

src-ui/src/styles.scss

@@ -680,6 +680,10 @@ code {
   opacity: .5;
 }
 
+.whitespace-preserve {
+  white-space: preserve;
+}
+
 /* Animate items as they're being sorted. */
 .cdk-drop-list-dragging .cdk-drag {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);