added angular font-awesome and removed assets

package.json

@@ -29,7 +29,9 @@
     "@angular/platform-browser": "^13",
     "@angular/platform-browser-dynamic": "^13",
     "@angular/router": "^13",
-    "font-awesome": "^4.7.0",
+    "@fortawesome/angular-fontawesome": "^0.10.2",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "rxjs": "~6.5.4",
     "tslib": "^2.4.0",
     "zone.js": "~0.11.4"

projects/angular-editor-app/src/app/app.component.html

@@ -9,7 +9,7 @@ <h1>Angular Editor</h1>
                   (blur)="onBlur($event)">
     <ng-template #customButtons let-executeCommandFn="executeCommandFn">
       <ae-toolbar-set>
-        <ae-button iconClass="fa fa-html5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
+        <ae-button [icon]="faHtml5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
       </ae-toolbar-set>
     </ng-template>
   </angular-editor>

projects/angular-editor-app/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AngularEditorConfig } from 'angular-editor';
-
 const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
+import { faHtml5 } from '@fortawesome/free-brands-svg-icons';
 
 @Component({
   selector: 'app-root',
@@ -13,7 +13,7 @@ export class AppComponent implements OnInit {
   title = 'app';
 
   form: FormGroup;
-
+  faHtml5 = faHtml5
   htmlContent1 = '';
   htmlContent2 = '';
   angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;

projects/angular-editor-app/src/app/app.module.ts

@@ -5,6 +5,9 @@ import { AppComponent } from './app.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {AngularEditorModule} from '../../../angular-editor/src/lib/angular-editor.module';
+import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 
 
 @NgModule({
@@ -21,4 +24,6 @@ import {AngularEditorModule} from '../../../angular-editor/src/lib/angular-edito
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule { 
+
+}

projects/angular-editor/ng-package.json

@@ -3,6 +3,5 @@
   "dest": "../../dist/angular-editor",
   "lib": {
     "entryFile": "src/public-api.ts"
-  },
-  "assets": ["./assets"]
+  }
 }

projects/angular-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkov/angular-editor",
-  "version": "3.0.0-beta.0",
+  "version": "3.1.0-beta.0",
   "description": "A simple native WYSIWYG editor for Angular 8+, 13+. Rich Text editor component for Angular.",
   "author": "Andrey Kolkov <[email protected]>",
   "repository": "https://github.com/kolkov/angular-editor",
@@ -10,8 +10,12 @@
     "url": "https://github.com/kolkov/angular-editor/issues"
   },
   "peerDependencies": {
-    "@angular/common": ">=13",
-    "@angular/core": ">=13"
+    "@angular/common": ">=15",
+    "@angular/core": ">=15",
+    "@fortawesome/angular-fontawesome": "^0.10.2",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/angular-editor/src/lib/ae-button/ae-button.component.html

@@ -1,3 +1,4 @@
-<button type="button" [title]="title" class="angular-editor-button" (click)="buttonClick.emit()" tabindex="-1"><i
-    [class]="iconClass"></i></button>
+<button type="button" [title]="title" class="angular-editor-button" (click)="buttonClick.emit()" tabindex="-1">
+    <fa-icon [icon]="icon"></fa-icon>
+</button>
 

projects/angular-editor/src/lib/ae-button/ae-button.component.ts

@@ -1,4 +1,5 @@
 import {Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angular/core';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 
 
 @Component({
@@ -9,7 +10,7 @@ import {Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angula
 })
 export class AeButtonComponent {
 
-  @Input() iconClass = '';
+  @Input() icon!: IconDefinition;
   @Input() title = '';
   @Output() buttonClick = new EventEmitter();
 

projects/angular-editor/src/lib/angular-editor-toolbar.component.html

@@ -1,69 +1,91 @@
 <div class="angular-editor-toolbar" *ngIf="showToolbar">
   <div class="angular-editor-toolbar-set">
     <button type="button" title="Undo" class="angular-editor-button" (click)="triggerCommand('undo')"
-            [hidden]="isButtonHidden('undo')" tabindex="-1"><i
-      class='fa fa-undo'></i></button>
+            [hidden]="isButtonHidden('undo')" tabindex="-1">
+            <fa-icon [icon]="faUndo"></fa-icon>
+            </button>
     <button type="button" title="Redo" class="angular-editor-button" (click)="triggerCommand('redo')"
-            [hidden]="isButtonHidden('redo')" tabindex="-1"><i
-      class='fa fa-repeat'></i></button>
+            [hidden]="isButtonHidden('redo')" tabindex="-1">
+            <fa-icon [icon]="faRedo"></fa-icon>
+          </button>
   </div>
   <div class="angular-editor-toolbar-set">
     <button [id]="'bold-'+id" type="button" title="Bold" class="angular-editor-button" (click)="triggerCommand('bold')"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('bold')" tabindex="-1"><i class='fa fa-bold'></i></button>
+            [disabled]="htmlMode" [hidden]="isButtonHidden('bold')" tabindex="-1">
+            <fa-icon [icon]="faBold"></fa-icon>
+          </button>
     <button [id]="'italic-'+id" type="button" title="Italic" class="angular-editor-button"
             (click)="triggerCommand('italic')"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('italic')" tabindex="-1"><i class='fa fa-italic'></i>
+            [disabled]="htmlMode" [hidden]="isButtonHidden('italic')" tabindex="-1">
+            <fa-icon [icon]="faItalic"></fa-icon>
     </button>
     <button [id]="'underline-'+id" type="button" title="Underline" class="angular-editor-button"
             (click)="triggerCommand('underline')" [disabled]="htmlMode" [hidden]="isButtonHidden('underline')"
-            tabindex="-1"><i class='fa fa-underline'></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faUnderline"></fa-icon>
+          </button>
     <button [id]="'strikeThrough-'+id" type="button" title="Strikethrough" class="angular-editor-button"
             (click)="triggerCommand('strikeThrough')" [disabled]="htmlMode" [hidden]="isButtonHidden('strikeThrough')"
-            tabindex="-1"><i class='fa fa-strikethrough'></i></button>
+            tabindex="-1">
+            <i class='fa fa-strikethrough'></i>
+            <fa-icon [icon]="faStrikethrough"></fa-icon>
+          </button>
     <button [id]="'subscript-'+id" type="button" title="Subscript" class="angular-editor-button"
             (click)="triggerCommand('subscript')" [disabled]="htmlMode" [hidden]="isButtonHidden('subscript')"
-            tabindex="-1"><i class='fa fa-subscript'></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faSubscript"></fa-icon>
+          </button>
     <button [id]="'superscript-'+id" type="button" title="Superscript" class="angular-editor-button"
             (click)="triggerCommand('superscript')" [disabled]="htmlMode" [hidden]="isButtonHidden('superscript')"
-            tabindex="-1"><i class='fa fa-superscript'></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faSuperscript"></fa-icon>
+          </button>
   </div>
   <div class="angular-editor-toolbar-set">
     <button [id]="'justifyLeft-'+id" type="button" title="Justify Left" class="angular-editor-button"
             (click)="triggerCommand('justifyLeft')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyLeft')"
-            tabindex="-1"><i
-      class='fa fa-align-left'></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faAlignLeft"></fa-icon>
+    </button>
     <button [id]="'justifyCenter-'+id" type="button" title="Justify Center" class="angular-editor-button"
             (click)="triggerCommand('justifyCenter')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyCenter')"
-            tabindex="-1"><i
-      class='fa fa-align-center'></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faAlignCenter"></fa-icon>
+          </button>
     <button [id]="'justifyRight-'+id" type="button" title="Justify Right" class="angular-editor-button"
             (click)="triggerCommand('justifyRight')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyRight')"
             tabindex="-1">
-      <i class='fa fa-align-right'></i></button>
+      <i class='fa fa-align-right'></i>
+    </button>
     <button [id]="'justifyFull-'+id" type="button" title="Justify Full" class="angular-editor-button"
             (click)="triggerCommand('justifyFull')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyFull')"
-            tabindex="-1"><i
-      class='fa fa-align-justify'></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faAlignJustify"></fa-icon>
+          </button>
   </div>
   <div class="angular-editor-toolbar-set">
     <button [id]="'indent-'+id" type="button" title="Indent" class="angular-editor-button"
             (click)="triggerCommand('indent')"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('indent')" tabindex="-1"><i
-      class='fa fa-indent'></i></button>
+            [disabled]="htmlMode" [hidden]="isButtonHidden('indent')" tabindex="-1">
+            <fa-icon [icon]="faIndent"></fa-icon>
+          </button>
     <button [id]="'outdent-'+id" type="button" title="Outdent" class="angular-editor-button"
             (click)="triggerCommand('outdent')"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('outdent')" tabindex="-1"><i
-      class='fa fa-outdent'></i></button>
+            [disabled]="htmlMode" [hidden]="isButtonHidden('outdent')" tabindex="-1">
+            <fa-icon [icon]="faOutdent"></fa-icon>
+          </button>
   </div>
   <div class="angular-editor-toolbar-set">
     <button [id]="'insertUnorderedList-'+id" type="button" title="Unordered List" class="angular-editor-button"
             (click)="triggerCommand('insertUnorderedList')" [disabled]="htmlMode"
-            [hidden]="isButtonHidden('insertUnorderedList')" tabindex="-1"><i
-      class='fa fa-list-ul'></i></button>
+            [hidden]="isButtonHidden('insertUnorderedList')" tabindex="-1">
+            <fa-icon [icon]="faListUl"></fa-icon>
+          </button>
     <button [id]="'insertOrderedList-'+id" type="button" title="Ordered List" class="angular-editor-button"
             (click)="triggerCommand('insertOrderedList')" [disabled]="htmlMode"
-            [hidden]="isButtonHidden('insertOrderedList')" tabindex="-1"><i
-      class='fa fa-list-ol'></i></button>
+            [hidden]="isButtonHidden('insertOrderedList')" tabindex="-1">
+            <fa-icon [icon]="faListOl"></fa-icon>
+          </button>
   </div>
   <div class="angular-editor-toolbar-set">
 
@@ -101,7 +123,9 @@
     <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; fgInput.click()"
             title="Text Color"
             [disabled]="htmlMode" [hidden]="isButtonHidden('textColor')" tabindex="-1"><span
-      class="color-label foreground"><i class="fa fa-font"></i></span>
+      class="color-label foreground">
+      <fa-icon [icon]="faFont"></fa-icon>
+    </span>
     </button>
     <input
       style="display: none"
@@ -110,7 +134,9 @@
     <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; bgInput.click()"
             title="Background Color"
             [disabled]="htmlMode" [hidden]="isButtonHidden('backgroundColor')" tabindex="-1"><span
-      class="color-label background"><i class="fa fa-font"></i></span>
+      class="color-label background">
+      <fa-icon [icon]="faFont"></fa-icon>
+    </span>
     </button>
   </div>
   <div *ngIf="_customClasses" class="angular-editor-toolbar-set">
@@ -124,11 +150,11 @@
   <div class="angular-editor-toolbar-set">
     <button [id]="'link-'+id" type="button" class="angular-editor-button" (click)="insertUrl()"
             title="Insert Link" [disabled]="isLinkButtonDisabled" [hidden]="isButtonHidden('link')" tabindex="-1">
-      <i class="fa fa-link"></i>
+      <fa-icon [icon]="faLink"></fa-icon>
     </button>
     <button [id]="'unlink-'+id" type="button" class="angular-editor-button" (click)="triggerCommand('unlink')"
             title="Unlink" [disabled]="htmlMode || !linkSelected" [hidden]="isButtonHidden('unlink')" tabindex="-1">
-      <i class="fa fa-chain-broken"></i>
+      <fa-icon [icon]="faChainBroken"></fa-icon>
     </button>
     <input
       style="display: none"
@@ -137,27 +163,32 @@
       #fileInput>
     <button [id]="'insertImage-'+id" type="button" class="angular-editor-button" (click)="focus(); fileInput.click()"
             title="Insert Image"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('insertImage')" tabindex="-1"><i class="fa fa-image"></i>
+            [disabled]="htmlMode" [hidden]="isButtonHidden('insertImage')" tabindex="-1">
+            <fa-icon [icon]="faImage"></fa-icon>
     </button>
     <button [id]="'insertVideo-'+id" type="button" class="angular-editor-button"
             (click)="insertVideo()" title="Insert Video" [disabled]="htmlMode" [hidden]="isButtonHidden('insertVideo')"
-            tabindex="-1"><i
-      class="fa fa-video-camera"></i></button>
+            tabindex="-1">
+            <fa-icon [icon]="faVideo"></fa-icon>
+          </button>
     <button [id]="'insertHorizontalRule-'+id" type="button" title="Horizontal Line" class="angular-editor-button"
             (click)="triggerCommand('insertHorizontalRule')" [disabled]="htmlMode"
-            [hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1"><i
-      class="fa fa-minus"></i></button>
+            [hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1">
+            <fa-icon [icon]="faMinus"></fa-icon>
+          </button>
   </div>
   <div class="angular-editor-toolbar-set">
     <button [id]="'clearFormatting-'+id" type="button" title="Clear Formatting" class="angular-editor-button"
             (click)="triggerCommand('removeFormat')" [disabled]="htmlMode" [hidden]="isButtonHidden('removeFormat')"
-            tabindex="-1"><i class='fa fa-remove'></i>
+            tabindex="-1">
+            <fa-icon [icon]="faRemove"></fa-icon>
     </button>
   </div>
   <div class="angular-editor-toolbar-set">
     <button [id]="'toggleEditorMode-'+id" type="button" title="HTML Code" class="angular-editor-button"
-            (click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1"><i
-      class='fa fa-code'></i></button>
+            (click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1">
+            <fa-icon [icon]="faCode"></fa-icon>
+          </button>
   </div>
   <ng-content></ng-content>
 </div>

projects/angular-editor/src/lib/angular-editor-toolbar.component.ts

@@ -1,20 +1,20 @@
+import { DOCUMENT } from '@angular/common';
+import { HttpEvent, HttpResponse } from '@angular/common/http';
 import {
   Component,
-  ContentChild,
   ElementRef,
   EventEmitter,
   Inject,
   Input,
   Output,
-  Renderer2, TemplateRef,
+  Renderer2,
   ViewChild
 } from '@angular/core';
-import {AngularEditorService, UploadResponse} from './angular-editor.service';
-import {HttpResponse, HttpEvent} from '@angular/common/http';
-import {DOCUMENT} from '@angular/common';
-import {CustomClass} from './config';
-import {SelectOption} from './ae-select/ae-select.component';
+import { faAlignCenter, faAlignJustify, faAlignLeft, faAlignRight, faBold, faChainBroken, faCode, faFont, faImage, faIndent, faItalic, faLink, faListOl, faListUl, faMinus, faOutdent, faRedo, faRemove, faStrikethrough, faSubscript, faSuperscript, faUnderline, faUndo, faVideo } from '@fortawesome/free-solid-svg-icons';
 import { Observable } from 'rxjs';
+import { SelectOption } from './ae-select/ae-select.component';
+import { AngularEditorService, UploadResponse } from './angular-editor.service';
+import { CustomClass } from './config';
 
 @Component({
   selector: 'angular-editor-toolbar',
@@ -109,6 +109,31 @@ export class AngularEditorToolbarComponent {
     }
   ];
 
+  faUndo = faUndo
+  faRedo = faRedo;
+  faBold = faBold;
+  faItalic = faItalic;
+  faUnderline = faUnderline;
+  faStrikethrough = faStrikethrough;
+  faSubscript = faSubscript;
+  faSuperscript = faSuperscript;
+  faAlignLeft = faAlignLeft;
+  faAlignCenter = faAlignCenter;
+  faAlignRight = faAlignRight;
+  faAlignJustify = faAlignJustify;
+  faIndent = faIndent;
+  faOutdent = faOutdent;
+  faListUl = faListUl;
+  faListOl = faListOl;
+  faFont = faFont;
+  faLink = faLink;
+  faChainBroken = faChainBroken;
+  faImage = faImage;
+  faVideo = faVideo;
+  faMinus = faMinus;
+  faRemove = faRemove;
+  faCode = faCode;
+
   customClassId = '-1';
   // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
   _customClasses: CustomClass[];

projects/angular-editor/src/lib/angular-editor.module.ts

@@ -1,18 +1,27 @@
-import {NgModule} from '@angular/core';
-import {AngularEditorComponent} from './angular-editor.component';
-import {AngularEditorToolbarComponent} from './angular-editor-toolbar.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {CommonModule} from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { AeButtonComponent } from "./ae-button/ae-button.component";
 import { AeSelectComponent } from './ae-select/ae-select.component';
-import {AeButtonComponent} from "./ae-button/ae-button.component";
 import { AeToolbarSetComponent } from './ae-toolbar-set/ae-toolbar-set.component';
+import { AngularEditorToolbarComponent } from './angular-editor-toolbar.component';
+import { AngularEditorComponent } from './angular-editor.component';
+
+import { fab, faHtml5 } from '@fortawesome/free-brands-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, ReactiveFormsModule
+    CommonModule, FormsModule, ReactiveFormsModule, FontAwesomeModule
   ],
   declarations: [AngularEditorComponent, AngularEditorToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent],
   exports: [AngularEditorComponent, AngularEditorToolbarComponent, AeButtonComponent, AeToolbarSetComponent]
 })
 export class AngularEditorModule {
+  constructor(library: FaIconLibrary) {
+    library.addIconPacks(fas, fab);
+}
 }
+
+