feat(frontend:files): enhance text viewer with search panel toggle and keyboard shortcuts handling

Author: johaven

backend/src/applications/files/utils/send-file.ts

@@ -44,7 +44,7 @@ export class SendFile {
   async stream(req: FastifyRequest, res: FastifyReply): Promise<StreamableFile> {
     // SendStream manages HEAD (no including body in response) & GET request (with body)
     // Ranges, LastModified, Etag are also handled
-    // Send function uses decodeURIComponent, but filePath is already decoded : we need to encode it again before passing it.
+    // Send function uses decodeURIComponent, but filePath is already decoded: we need to encode it again before passing it.
     const encodedFilePath = encodeURIComponent(this.filePath)
     this.fileName = encodeURIComponent(this.downloadName ? this.downloadName : fileName(this.filePath))
     const sendResult: SendResult = await send(req.raw, encodedFilePath, this.sendOptions)

frontend/src/app/applications/files/components/viewers/files-viewer-text.component.html

@@ -26,10 +26,12 @@
       <fa-icon [icon]="icons.faFloppyDisk"></fa-icon>
     </button>
     <button
-      (click)="openSearchPanel(editor.view)"
+      btnCheckbox
+      [ngModel]="this.isSearchPanelOpen"
+      (ngModelChange)="toggleSearch()"
       [tooltip]="'Search' | translate:locale.language"
       container="body"
-      class="d-none d-sm-block btn btn-sm btn-secondary me-1"
+      class="d-none d-sm-block btn btn-sm btn-custom me-1"
       type="button"
       [disabled]="!isReadable()">
       <fa-icon [icon]="icons.faMagnifyingGlass"></fa-icon>

frontend/src/app/applications/files/components/viewers/files-viewer-text.component.ts

@@ -6,14 +6,15 @@
 
 import { CodeEditor } from '@acrodata/code-editor'
 import { HttpClient, HttpErrorResponse } from '@angular/common/http'
-import { Component, inject, input, linkedSignal, OnDestroy, OnInit, signal, ViewEncapsulation } from '@angular/core'
+import { Component, HostListener, inject, input, linkedSignal, OnDestroy, OnInit, signal, ViewChild, ViewEncapsulation } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { LanguageDescription } from '@codemirror/language'
 import { languages } from '@codemirror/language-data'
-import { openSearchPanel } from '@codemirror/search'
+import { closeSearchPanel, openSearchPanel } from '@codemirror/search'
 import { FaIconComponent } from '@fortawesome/angular-fontawesome'
 import { faFloppyDisk, faLock, faLockOpen, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { L10N_LOCALE, L10nLocale, L10nTranslatePipe } from 'angular-l10n'
+import { ButtonCheckboxDirective } from 'ngx-bootstrap/buttons'
 import { TooltipModule } from 'ngx-bootstrap/tooltip'
 import { themeDark } from '../../../../layout/layout.interfaces'
 import { LayoutService } from '../../../../layout/layout.service'
@@ -23,38 +24,72 @@ import { FilesUploadService } from '../../services/files-upload.service'
 @Component({
   selector: 'app-files-viewer-text',
   encapsulation: ViewEncapsulation.None,
-  imports: [CodeEditor, TooltipModule, FormsModule, FaIconComponent, L10nTranslatePipe],
+  imports: [CodeEditor, TooltipModule, FormsModule, FaIconComponent, L10nTranslatePipe, ButtonCheckboxDirective],
   styles: [
     `
       .code-editor {
         height: calc(100% - 40px);
-        font-size: 0.75rem;
+        font-size: 0.8rem;
       }
     `
   ],
   templateUrl: 'files-viewer-text.component.html'
 })
 export class FilesViewerTextComponent implements OnInit, OnDestroy {
+  @ViewChild('editor') editor: CodeEditor
   currentHeight = input<number>()
   file = input<FileModel>()
   mode = input<'view' | 'edit'>('view')
   isReadonly = linkedSignal(() => this.mode() === 'view')
   isReadable = signal(false)
   isModified = signal(false)
-  protected readonly openSearchPanel = openSearchPanel
   protected content: string
   protected currentLanguage = undefined
   protected readonly languages: LanguageDescription[] = languages
   protected currentTheme: any = 'light'
   protected readonly icons = { faFloppyDisk, faLock, faLockOpen, faMagnifyingGlass }
   protected readonly locale = inject<L10nLocale>(L10N_LOCALE)
+  protected isSearchPanelOpen = false
   private isContentReady = false
   private readonly layout = inject(LayoutService)
   private readonly http = inject(HttpClient)
   private readonly filesUpload = inject(FilesUploadService)
   private subscription = this.layout.switchTheme.subscribe((layout: string) => (this.currentTheme = layout === themeDark ? 'dark' : 'light'))
   private readonly maxSize = 5242880 // 5MB
 
+  @HostListener('document:keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    // ESC
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.stopPropagation()
+      event.preventDefault()
+      if (this.isSearchPanelOpen) {
+        this.toggleSearch()
+      } else if (!this.isModified()) {
+        if (this.isModified()) {
+          // show dialog alert
+        } else {
+          this.layout.closeDialog()
+        }
+      }
+      return
+    }
+    // Ctrl/Cmd+S | Ctrl/Cmd+F
+    if (event.ctrlKey || event.metaKey) {
+      switch (event.key.toLowerCase()) {
+        case 's':
+          event.preventDefault()
+          this.save()
+          return
+        case 'f':
+          event.preventDefault()
+          event.stopPropagation()
+          this.toggleSearch()
+          return
+      }
+    }
+  }
+
   ngOnInit() {
     const language: LanguageDescription = LanguageDescription.matchFilename(languages, this.file().name)
     if (language?.name || this.file().size <= this.maxSize) {
@@ -78,6 +113,15 @@ export class FilesViewerTextComponent implements OnInit, OnDestroy {
     })
   }
 
+  toggleSearch() {
+    this.isSearchPanelOpen = !this.isSearchPanelOpen
+    if (this.isSearchPanelOpen) {
+      openSearchPanel(this.editor.view)
+    } else {
+      closeSearchPanel(this.editor.view)
+    }
+  }
+
   contentChange() {
     // Ignore first call
     if (this.isContentReady) {

frontend/src/styles/components/_fixes.scss

@@ -35,6 +35,7 @@ hr {
 .cm-panel.cm-search {
   display: flex;
   align-items: center;
+  text-wrap: nowrap;
 
   label {
     display: flex;

frontend/src/styles/components/_theme_dark.scss

@@ -612,4 +612,13 @@
   .avatar-img {
     background-color: darken($gray-light, 5%);
   }
+
+  // Code Mirror
+  .cm-panel.cm-search {
+    button[aria-label="close"] {
+      right: 10px !important;
+      font-size: 18px !important;
+      color: $gray-light !important;
+    }
+  }
 }