From e327a44251273ab653658dbd104148b70b70eaff Mon Sep 17 00:00:00 2001
From: Jonathan McClure <jonathan.mcclure@b2six.digital>
Date: Mon, 4 Apr 2022 17:06:19 +1000
Subject: [PATCH] Issue 436. Selecting font issue when inside modal

---
 .../src/lib/angular-editor-toolbar.component.html   |  2 +-
 .../src/lib/angular-editor-toolbar.component.ts     | 13 +++++++++++--
 .../src/lib/angular-editor.component.ts             |  4 +---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
index 6a2521f1f..d74aeb56a 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
@@ -76,7 +76,7 @@
   </div>
   <div class="angular-editor-toolbar-set">
 
-    <ae-select class="select-font" [options]="fonts"
+    <ae-select class="select-font" [options]="fontsList"
                [(ngModel)]="fontName"
                (change)="setFontName(fontName)"
                [disabled]="htmlMode"
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
index 8c025ff47..273d7dc92 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -2,7 +2,7 @@ import {Component, ElementRef, EventEmitter, Inject, Input, Output, Renderer2, V
 import {AngularEditorService, UploadResponse} from './angular-editor.service';
 import {HttpResponse, HttpEvent} from '@angular/common/http';
 import {DOCUMENT} from '@angular/common';
-import {CustomClass} from './config';
+import { CustomClass, Font} from './config';
 import {SelectOption} from './ae-select/ae-select.component';
 import { Observable } from 'rxjs';
 
@@ -119,7 +119,16 @@ export class AngularEditorToolbarComponent {
   @Input() uploadUrl: string;
   @Input() upload: (file: File) => Observable<HttpEvent<UploadResponse>>;
   @Input() showToolbar: boolean;
-  @Input() fonts: SelectOption[] = [{label: '', value: ''}];
+
+  _fonts: Font[];
+  fontsList: SelectOption[] = [{ label: '', value: '' }];
+  @Input()
+  set fonts(fonts: Font[]) { 
+    if (fonts) {
+      this._fonts = fonts;
+      this.fontsList = this._fonts.map((x, i) => ({ label: x.name, value: x.name }));
+    }
+  }
 
   @Input()
   set customClasses(classes: CustomClass[]) {
diff --git a/projects/angular-editor/src/lib/angular-editor.component.ts b/projects/angular-editor/src/lib/angular-editor.component.ts
index 4fdc552b7..e7515ecc2 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor.component.ts
@@ -395,9 +395,7 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft
 
   getFonts() {
     const fonts = this.config.fonts ? this.config.fonts : angularEditorConfig.fonts;
-    return fonts.map(x => {
-      return {label: x.name, value: x.name};
-    });
+    return fonts;
   }
 
   getCustomTags() {