From 4179eef4d95dbfd31996d62bdc2702bae3035564 Mon Sep 17 00:00:00 2001
From: Vikri Permana <vikri.permana@smt-id.com>
Date: Thu, 6 Jul 2023 11:46:49 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Adding=20new=20heading=20configurat?=
 =?UTF-8?q?ion=20so=20now=20heading=20can=20be=20customized?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/angular-editor-toolbar.component.ts   | 50 ++----------------
 .../src/lib/angular-editor.component.html     |  1 +
 .../src/lib/angular-editor.component.ts       |  6 +++
 projects/angular-editor/src/lib/config.ts     | 52 +++++++++++++++++++
 4 files changed, 63 insertions(+), 46 deletions(-)

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 3307473c1..c13e26d70 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -31,52 +31,9 @@ export class AngularEditorToolbarComponent {
   foreColour;
   backColor;
 
-  headings: SelectOption[] = [
-    {
-      label: 'Heading 1',
-      value: 'h1',
-    },
-    {
-      label: 'Heading 2',
-      value: 'h2',
-    },
-    {
-      label: 'Heading 3',
-      value: 'h3',
-    },
-    {
-      label: 'Heading 4',
-      value: 'h4',
-    },
-    {
-      label: 'Heading 5',
-      value: 'h5',
-    },
-    {
-      label: 'Heading 6',
-      value: 'h6',
-    },
-    {
-      label: 'Heading 7',
-      value: 'h7',
-    },
-    {
-      label: 'Paragraph',
-      value: 'p',
-    },
-    {
-      label: 'Predefined',
-      value: 'pre'
-    },
-    {
-      label: 'Standard',
-      value: 'div'
-    },
-    {
-      label: 'default',
-      value: 'default'
-    }
-  ];
+  // headings: SelectOption[] = [
+    
+  // ];
 
   fontSizes: SelectOption[] = [
     {
@@ -130,6 +87,7 @@ export class AngularEditorToolbarComponent {
   @Input() upload: (file: File) => Observable<HttpEvent<UploadResponse>>;
   @Input() showToolbar: boolean;
   @Input() fonts: SelectOption[] = [{label: '', value: ''}];
+  @Input() headings: SelectOption[] = [{label: '', value: ''}];
 
   @Input()
   set customClasses(classes: CustomClass[]) {
diff --git a/projects/angular-editor/src/lib/angular-editor.component.html b/projects/angular-editor/src/lib/angular-editor.component.html
index 8764a9962..3fe75dda9 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.html
+++ b/projects/angular-editor/src/lib/angular-editor.component.html
@@ -12,6 +12,7 @@
           [upload]="config.upload"
           [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
           [fonts]="getFonts()"
+          [headings]="getHeadings()"
           [customClasses]="config.customClasses"
           [defaultFontName]="config.defaultFontName"
           [defaultFontSize]="config.defaultFontSize"
diff --git a/projects/angular-editor/src/lib/angular-editor.component.ts b/projects/angular-editor/src/lib/angular-editor.component.ts
index bc0934aef..18f58c7ec 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor.component.ts
@@ -403,6 +403,12 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft
     });
   }
 
+  getHeadings(){
+    const headings = this.config.headings ? this.config.headings : angularEditorConfig.headings;
+
+    return headings;
+  }
+
   getCustomTags() {
     const tags = ['span'];
     this.config.customClasses.forEach(x => {
diff --git a/projects/angular-editor/src/lib/config.ts b/projects/angular-editor/src/lib/config.ts
index b6d23ac76..cb167dc72 100644
--- a/projects/angular-editor/src/lib/config.ts
+++ b/projects/angular-editor/src/lib/config.ts
@@ -13,6 +13,11 @@ export interface Font {
   class: string;
 }
 
+export interface Headings {
+  label: string;
+  value: string;
+}
+
 export interface AngularEditorConfig {
   editable?: boolean;
   spellcheck?: boolean;
@@ -32,6 +37,7 @@ export interface AngularEditorConfig {
   upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
   uploadWithCredentials?: boolean;
   fonts?: Font[];
+  headings?: Headings[];
   customClasses?: CustomClass[];
   sanitize?: boolean;
   toolbarPosition?: 'top' | 'bottom';
@@ -61,6 +67,52 @@ export const angularEditorConfig: AngularEditorConfig = {
     {class: 'calibri', name: 'Calibri'},
     {class: 'comic-sans-ms', name: 'Comic Sans MS'}
   ],
+  headings:[
+    {
+      label: 'Heading 1',
+      value: 'h1',
+    },
+    {
+      label: 'Heading 2',
+      value: 'h2',
+    },
+    {
+      label: 'Heading 3',
+      value: 'h3',
+    },
+    {
+      label: 'Heading 4',
+      value: 'h4',
+    },
+    {
+      label: 'Heading 5',
+      value: 'h5',
+    },
+    {
+      label: 'Heading 6',
+      value: 'h6',
+    },
+    {
+      label: 'Heading 7',
+      value: 'h7',
+    },
+    {
+      label: 'Paragraph',
+      value: 'p',
+    },
+    {
+      label: 'Predefined',
+      value: 'pre'
+    },
+    {
+      label: 'Standard',
+      value: 'div'
+    },
+    {
+      label: 'default',
+      value: 'default'
+    }
+  ],
   uploadUrl: 'v1/image',
   uploadWithCredentials: false,
   sanitize: true,