SF-2639 Use project-specified font wherever vernacular text is shown (#3525)

Author: pmachapman

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html

@@ -93,7 +93,7 @@ <h3 id="totalAnswersMessage">
                 }
                 @if (answer.scriptureText) {
                   <div class="answer-scripture" dir="auto">
-                    <span class="answer-scripture-text">{{
+                    <span class="answer-scripture-text" [style.--project-font]="projectFont">{{
                       (answer.selectionStartClipped ? "…" : "") +
                         (answer.scriptureText || "") +
                         (answer.selectionEndClipped ? "…" : "")

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss

@@ -145,6 +145,7 @@
 }
 
 .answer-scripture-text {
+  font-family: var(--project-font);
   padding-block: 6px;
 }
 

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts

@@ -20,6 +20,7 @@ import { toVerseRef, VerseRefData } from 'realtime-server/lib/esm/scriptureforge
 import { firstValueFrom, Subscription } from 'rxjs';
 import { DialogService } from 'xforge-common/dialog.service';
 import { FileService } from 'xforge-common/file.service';
+import { FontService } from 'xforge-common/font.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { FileType } from 'xforge-common/models/file-offline-data';
 import { NoticeService } from 'xforge-common/notice.service';
@@ -110,6 +111,7 @@ export class CheckingAnswersComponent implements OnInit {
   verseRef?: VerseRef;
   answersHighlightStatus: Map<string, boolean> = new Map<string, boolean>();
   submittingAnswer: boolean = false;
+  projectFont?: string;
 
   /** IDs of answers to show to user (so, excluding unshown incoming answers). */
   private _answersToShow: string[] = [];
@@ -130,6 +132,7 @@ export class CheckingAnswersComponent implements OnInit {
     private readonly questionDialogService: QuestionDialogService,
     private readonly i18n: I18nService,
     private readonly fileService: FileService,
+    private readonly fontService: FontService,
     private readonly onlineStatusService: OnlineStatusService,
     private readonly projectService: SFProjectService,
     private destroyRef: DestroyRef
@@ -154,6 +157,7 @@ export class CheckingAnswersComponent implements OnInit {
         this.setProjectAdmin();
       });
     this.setProjectAdmin();
+    this.projectFont = this.fontService.getFontFamilyFromProject(projectProfileDoc);
   }
 
   @Input() set questionDoc(questionDoc: QuestionDoc | undefined) {

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-input-form/checking-input-form.component.ts

@@ -5,6 +5,7 @@ import { Comment } from 'realtime-server/lib/esm/scriptureforge/models/comment';
 import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project';
 import { VerseRefData } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data';
 import { DialogService } from 'xforge-common/dialog.service';
+import { FontService } from 'xforge-common/font.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { Breakpoint, MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service';
 import { NoticeService } from 'xforge-common/notice.service';
@@ -60,6 +61,7 @@ export class CheckingInputFormComponent {
   constructor(
     readonly noticeService: NoticeService,
     private readonly dialogService: DialogService,
+    private readonly fontService: FontService,
     private readonly i18n: I18nService,
     private readonly breakpointObserver: BreakpointObserver,
     private readonly mediaBreakpointService: MediaBreakpointService,
@@ -98,6 +100,7 @@ export class CheckingInputFormComponent {
       chapterNum: (this.verseRef && this.verseRef.chapterNum) || verseRef.chapterNum,
       textsByBookId: this.textsByBookId,
       projectId: this._questionDoc.data.projectRef,
+      projectFont: this.fontService.getFontFamilyFromProject(this.project),
       isRightToLeft: this.project?.isRightToLeft,
       selectedText: this.selectedText || '',
       selectedVerses: this.verseRef

src/SIL.XForge.Scripture/ClientApp/src/app/text-chooser-dialog/text-chooser-dialog.component.html

@@ -12,8 +12,9 @@ <h2>{{ bookName }} {{ chapterNum }}</h2>
         [id]="textDocId"
         [multiSegmentSelection]="true"
         [isRightToLeft]="isTextRightToLeft"
+        [style.--project-font]="projectFont"
       ></app-text>
-      <div class="selection-preview">
+      <div class="selection-preview" [style.--project-font]="projectFont">
         <p dir="auto">
           {{ (startClipped ? "…" : "") + (selectedText || "") + (endClipped ? "…" : "") }}
           <span class="selection-reference">{{ referenceForDisplay }}</span>

src/SIL.XForge.Scripture/ClientApp/src/app/text-chooser-dialog/text-chooser-dialog.component.scss

@@ -33,6 +33,7 @@ app-text {
 }
 
 .selection-preview {
+  font-family: var(--project-font);
   height: 16em;
   overflow-y: scroll;
   margin-top: 1em;

src/SIL.XForge.Scripture/ClientApp/src/app/text-chooser-dialog/text-chooser-dialog.component.ts

@@ -18,6 +18,7 @@ import { TextComponent } from '../shared/text/text.component';
 export interface TextChooserDialogData {
   bookNum: number;
   chapterNum: number;
+  projectFont?: string;
   projectId: string;
   textsByBookId: TextsByBookId;
   isRightToLeft?: boolean;
@@ -81,6 +82,10 @@ export class TextChooserDialogComponent {
     return this.i18n.localizeBook(this.bookNum);
   }
 
+  get projectFont(): string {
+    return this.data.projectFont ?? '';
+  }
+
   get isTextRightToLeft(): boolean {
     return this.data.isRightToLeft == null ? false : this.data.isRightToLeft;
   }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/biblical-terms/biblical-terms.component.scss

@@ -50,6 +50,11 @@
   overflow: hidden;
 }
 
+/* Show the term renderings in the project font */
+.mat-column-renderings {
+  font-family: var(--project-font);
+}
+
 /* Disable hover effects for disabled buttons */
 .mat-mdc-icon-button:disabled {
   pointer-events: none;

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/editor-history/editor-history.component.spec.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import Quill from 'quill';
+import { createTestProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-test-data';
 import { TextData } from 'realtime-server/lib/esm/scriptureforge/models/text-data';
 import { Subject } from 'rxjs';
 import { anything, mock, when } from 'ts-mockito';
@@ -10,6 +11,7 @@ import { OnlineStatusService } from 'xforge-common/online-status.service';
 import { TestOnlineStatusModule } from 'xforge-common/test-online-status.module';
 import { TestOnlineStatusService } from 'xforge-common/test-online-status.service';
 import { configureTestingModule } from 'xforge-common/test-utils';
+import { SFProjectProfileDoc } from '../../../core/models/sf-project-profile-doc';
 import { TextDoc, TextDocId } from '../../../core/models/text-doc';
 import { Revision } from '../../../core/paratext.service';
 import { SFProjectService } from '../../../core/sf-project.service';
@@ -67,6 +69,19 @@ describe('EditorHistoryComponent', () => {
     expect(component.revisionSelect.emit).not.toHaveBeenCalled();
   });
 
+  it('should load the project document when the project id is set', fakeAsync(() => {
+    const testProjectId = 'test_project_id';
+    const projectDoc = { data: createTestProjectProfile(), id: testProjectId } as SFProjectProfileDoc;
+    when(mockSFProjectService.getProfile(testProjectId)).thenReturn(Promise.resolve(projectDoc));
+    expect(component.projectDoc).toBeUndefined();
+
+    component.projectId = testProjectId;
+    tick();
+
+    expect(component.projectId).toBe(testProjectId);
+    expect(component.projectDoc).toBe(projectDoc);
+  }));
+
   it('should load history after view init', fakeAsync(() => {
     const revision: Revision = { timestamp: 'date_here' };
     const textDoc: TextDoc = { data: { ops: [] } } as unknown as TextDoc;

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/editor-history/editor-history.component.ts

@@ -29,7 +29,22 @@ import { HistoryChooserComponent, RevisionSelectEvent } from './history-chooser/
   standalone: false
 })
 export class EditorHistoryComponent implements OnChanges, OnInit, AfterViewInit {
-  @Input() projectId?: string;
+  private _projectId?: string | undefined;
+
+  @Input()
+  public get projectId(): string | undefined {
+    return this._projectId;
+  }
+  public set projectId(value: string | undefined) {
+    this._projectId = value;
+    if (value != null) {
+      this.projectService.getProfile(value).then(
+        p => (this.projectDoc = p),
+        () => (this.projectDoc = undefined)
+      );
+    }
+  }
+
   @Input() bookNum?: number;
   @Input() chapter?: number;
   @Input() isRightToLeft!: boolean;