Skip to content

Commit d580ea8

Browse files
author
mohaseebtariq
committed
added angular fontawesome and removed assets
1 parent 7f4b3cd commit d580ea8

17 files changed

+134
-2734
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
"@angular/platform-browser": "^13",
3030
"@angular/platform-browser-dynamic": "^13",
3131
"@angular/router": "^13",
32-
"font-awesome": "^4.7.0",
32+
"@fortawesome/angular-fontawesome": "^0.10.2",
33+
"@fortawesome/free-brands-svg-icons": "^6.6.0",
34+
"@fortawesome/free-solid-svg-icons": "^6.6.0",
3335
"rxjs": "~6.5.4",
3436
"tslib": "^2.4.0",
3537
"zone.js": "~0.11.4"

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1>Angular Editor</h1>
99
(blur)="onBlur($event)">
1010
<ng-template #customButtons let-executeCommandFn="executeCommandFn">
1111
<ae-toolbar-set>
12-
<ae-button iconClass="fa fa-html5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
12+
<ae-button [icon]="faHtml5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
1313
</ae-toolbar-set>
1414
</ng-template>
1515
</angular-editor>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, OnInit } from '@angular/core';
22
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
33
import { AngularEditorConfig } from 'angular-editor';
4-
54
const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
5+
import { faHtml5 } from '@fortawesome/free-brands-svg-icons';
66

77
@Component({
88
selector: 'app-root',
@@ -13,7 +13,7 @@ export class AppComponent implements OnInit {
1313
title = 'app';
1414

1515
form: FormGroup;
16-
16+
faHtml5 = faHtml5
1717
htmlContent1 = '';
1818
htmlContent2 = '';
1919
angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { AppComponent } from './app.component';
55
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
66
import {HttpClientModule} from '@angular/common/http';
77
import {AngularEditorModule} from '../../../angular-editor/src/lib/angular-editor.module';
8+
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
9+
import { fab } from '@fortawesome/free-brands-svg-icons';
10+
import { fas } from '@fortawesome/free-solid-svg-icons';
811

912

1013
@NgModule({
@@ -21,4 +24,6 @@ import {AngularEditorModule} from '../../../angular-editor/src/lib/angular-edito
2124
providers: [],
2225
bootstrap: [AppComponent]
2326
})
24-
export class AppModule { }
27+
export class AppModule {
28+
29+
}

‎projects/angular-editor/assets/FontAwesome.otf

-132 KB
Binary file not shown.

‎projects/angular-editor/assets/fontawesome-webfont.eot

-162 KB
Binary file not shown.

‎projects/angular-editor/assets/fontawesome-webfont.svg

-2,671
This file was deleted.

‎projects/angular-editor/assets/fontawesome-webfont.ttf

-162 KB
Binary file not shown.

‎projects/angular-editor/assets/fontawesome-webfont.woff

-95.7 KB
Binary file not shown.

‎projects/angular-editor/assets/fontawesome-webfont.woff2

-75.4 KB
Binary file not shown.

‎projects/angular-editor/ng-package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,5 @@
33
"dest": "../../dist/angular-editor",
44
"lib": {
55
"entryFile": "src/public-api.ts"
6-
},
7-
"assets": ["./assets"]
6+
}
87
}

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

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

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angular/core';
2+
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
23

34

45
@Component({
@@ -9,7 +10,7 @@ import {Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angula
910
})
1011
export class AeButtonComponent {
1112

12-
@Input() iconClass = '';
13+
@Input() icon!: IconDefinition;
1314
@Input() title = '';
1415
@Output() buttonClick = new EventEmitter();
1516

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

+68-37
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,91 @@
11
<div class="angular-editor-toolbar" *ngIf="showToolbar">
22
<div class="angular-editor-toolbar-set">
33
<button type="button" title="Undo" class="angular-editor-button" (click)="triggerCommand('undo')"
4-
[hidden]="isButtonHidden('undo')" tabindex="-1"><i
5-
class='fa fa-undo'></i></button>
4+
[hidden]="isButtonHidden('undo')" tabindex="-1">
5+
<fa-icon [icon]="faUndo"></fa-icon>
6+
</button>
67
<button type="button" title="Redo" class="angular-editor-button" (click)="triggerCommand('redo')"
7-
[hidden]="isButtonHidden('redo')" tabindex="-1"><i
8-
class='fa fa-repeat'></i></button>
8+
[hidden]="isButtonHidden('redo')" tabindex="-1">
9+
<fa-icon [icon]="faRedo"></fa-icon>
10+
</button>
911
</div>
1012
<div class="angular-editor-toolbar-set">
1113
<button [id]="'bold-'+id" type="button" title="Bold" class="angular-editor-button" (click)="triggerCommand('bold')"
12-
[disabled]="htmlMode" [hidden]="isButtonHidden('bold')" tabindex="-1"><i class='fa fa-bold'></i></button>
14+
[disabled]="htmlMode" [hidden]="isButtonHidden('bold')" tabindex="-1">
15+
<fa-icon [icon]="faBold"></fa-icon>
16+
</button>
1317
<button [id]="'italic-'+id" type="button" title="Italic" class="angular-editor-button"
1418
(click)="triggerCommand('italic')"
15-
[disabled]="htmlMode" [hidden]="isButtonHidden('italic')" tabindex="-1"><i class='fa fa-italic'></i>
19+
[disabled]="htmlMode" [hidden]="isButtonHidden('italic')" tabindex="-1">
20+
<fa-icon [icon]="faItalic"></fa-icon>
1621
</button>
1722
<button [id]="'underline-'+id" type="button" title="Underline" class="angular-editor-button"
1823
(click)="triggerCommand('underline')" [disabled]="htmlMode" [hidden]="isButtonHidden('underline')"
19-
tabindex="-1"><i class='fa fa-underline'></i></button>
24+
tabindex="-1">
25+
<fa-icon [icon]="faUnderline"></fa-icon>
26+
</button>
2027
<button [id]="'strikeThrough-'+id" type="button" title="Strikethrough" class="angular-editor-button"
2128
(click)="triggerCommand('strikeThrough')" [disabled]="htmlMode" [hidden]="isButtonHidden('strikeThrough')"
22-
tabindex="-1"><i class='fa fa-strikethrough'></i></button>
29+
tabindex="-1">
30+
<i class='fa fa-strikethrough'></i>
31+
<fa-icon [icon]="faStrikethrough"></fa-icon>
32+
</button>
2333
<button [id]="'subscript-'+id" type="button" title="Subscript" class="angular-editor-button"
2434
(click)="triggerCommand('subscript')" [disabled]="htmlMode" [hidden]="isButtonHidden('subscript')"
25-
tabindex="-1"><i class='fa fa-subscript'></i></button>
35+
tabindex="-1">
36+
<fa-icon [icon]="faSubscript"></fa-icon>
37+
</button>
2638
<button [id]="'superscript-'+id" type="button" title="Superscript" class="angular-editor-button"
2739
(click)="triggerCommand('superscript')" [disabled]="htmlMode" [hidden]="isButtonHidden('superscript')"
28-
tabindex="-1"><i class='fa fa-superscript'></i></button>
40+
tabindex="-1">
41+
<fa-icon [icon]="faSuperscript"></fa-icon>
42+
</button>
2943
</div>
3044
<div class="angular-editor-toolbar-set">
3145
<button [id]="'justifyLeft-'+id" type="button" title="Justify Left" class="angular-editor-button"
3246
(click)="triggerCommand('justifyLeft')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyLeft')"
33-
tabindex="-1"><i
34-
class='fa fa-align-left'></i></button>
47+
tabindex="-1">
48+
<fa-icon [icon]="faAlignLeft"></fa-icon>
49+
</button>
3550
<button [id]="'justifyCenter-'+id" type="button" title="Justify Center" class="angular-editor-button"
3651
(click)="triggerCommand('justifyCenter')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyCenter')"
37-
tabindex="-1"><i
38-
class='fa fa-align-center'></i></button>
52+
tabindex="-1">
53+
<fa-icon [icon]="faAlignCenter"></fa-icon>
54+
</button>
3955
<button [id]="'justifyRight-'+id" type="button" title="Justify Right" class="angular-editor-button"
4056
(click)="triggerCommand('justifyRight')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyRight')"
4157
tabindex="-1">
42-
<i class='fa fa-align-right'></i></button>
58+
<i class='fa fa-align-right'></i>
59+
</button>
4360
<button [id]="'justifyFull-'+id" type="button" title="Justify Full" class="angular-editor-button"
4461
(click)="triggerCommand('justifyFull')" [disabled]="htmlMode" [hidden]="isButtonHidden('justifyFull')"
45-
tabindex="-1"><i
46-
class='fa fa-align-justify'></i></button>
62+
tabindex="-1">
63+
<fa-icon [icon]="faAlignJustify"></fa-icon>
64+
</button>
4765
</div>
4866
<div class="angular-editor-toolbar-set">
4967
<button [id]="'indent-'+id" type="button" title="Indent" class="angular-editor-button"
5068
(click)="triggerCommand('indent')"
51-
[disabled]="htmlMode" [hidden]="isButtonHidden('indent')" tabindex="-1"><i
52-
class='fa fa-indent'></i></button>
69+
[disabled]="htmlMode" [hidden]="isButtonHidden('indent')" tabindex="-1">
70+
<fa-icon [icon]="faIndent"></fa-icon>
71+
</button>
5372
<button [id]="'outdent-'+id" type="button" title="Outdent" class="angular-editor-button"
5473
(click)="triggerCommand('outdent')"
55-
[disabled]="htmlMode" [hidden]="isButtonHidden('outdent')" tabindex="-1"><i
56-
class='fa fa-outdent'></i></button>
74+
[disabled]="htmlMode" [hidden]="isButtonHidden('outdent')" tabindex="-1">
75+
<fa-icon [icon]="faOutdent"></fa-icon>
76+
</button>
5777
</div>
5878
<div class="angular-editor-toolbar-set">
5979
<button [id]="'insertUnorderedList-'+id" type="button" title="Unordered List" class="angular-editor-button"
6080
(click)="triggerCommand('insertUnorderedList')" [disabled]="htmlMode"
61-
[hidden]="isButtonHidden('insertUnorderedList')" tabindex="-1"><i
62-
class='fa fa-list-ul'></i></button>
81+
[hidden]="isButtonHidden('insertUnorderedList')" tabindex="-1">
82+
<fa-icon [icon]="faListUl"></fa-icon>
83+
</button>
6384
<button [id]="'insertOrderedList-'+id" type="button" title="Ordered List" class="angular-editor-button"
6485
(click)="triggerCommand('insertOrderedList')" [disabled]="htmlMode"
65-
[hidden]="isButtonHidden('insertOrderedList')" tabindex="-1"><i
66-
class='fa fa-list-ol'></i></button>
86+
[hidden]="isButtonHidden('insertOrderedList')" tabindex="-1">
87+
<fa-icon [icon]="faListOl"></fa-icon>
88+
</button>
6789
</div>
6890
<div class="angular-editor-toolbar-set">
6991

@@ -101,7 +123,9 @@
101123
<button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; fgInput.click()"
102124
title="Text Color"
103125
[disabled]="htmlMode" [hidden]="isButtonHidden('textColor')" tabindex="-1"><span
104-
class="color-label foreground"><i class="fa fa-font"></i></span>
126+
class="color-label foreground">
127+
<fa-icon [icon]="faFont"></fa-icon>
128+
</span>
105129
</button>
106130
<input
107131
style="display: none"
@@ -110,7 +134,9 @@
110134
<button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; bgInput.click()"
111135
title="Background Color"
112136
[disabled]="htmlMode" [hidden]="isButtonHidden('backgroundColor')" tabindex="-1"><span
113-
class="color-label background"><i class="fa fa-font"></i></span>
137+
class="color-label background">
138+
<fa-icon [icon]="faFont"></fa-icon>
139+
</span>
114140
</button>
115141
</div>
116142
<div *ngIf="_customClasses" class="angular-editor-toolbar-set">
@@ -124,11 +150,11 @@
124150
<div class="angular-editor-toolbar-set">
125151
<button [id]="'link-'+id" type="button" class="angular-editor-button" (click)="insertUrl()"
126152
title="Insert Link" [disabled]="isLinkButtonDisabled" [hidden]="isButtonHidden('link')" tabindex="-1">
127-
<i class="fa fa-link"></i>
153+
<fa-icon [icon]="faLink"></fa-icon>
128154
</button>
129155
<button [id]="'unlink-'+id" type="button" class="angular-editor-button" (click)="triggerCommand('unlink')"
130156
title="Unlink" [disabled]="htmlMode || !linkSelected" [hidden]="isButtonHidden('unlink')" tabindex="-1">
131-
<i class="fa fa-chain-broken"></i>
157+
<fa-icon [icon]="faChainBroken"></fa-icon>
132158
</button>
133159
<input
134160
style="display: none"
@@ -137,27 +163,32 @@
137163
#fileInput>
138164
<button [id]="'insertImage-'+id" type="button" class="angular-editor-button" (click)="focus(); fileInput.click()"
139165
title="Insert Image"
140-
[disabled]="htmlMode" [hidden]="isButtonHidden('insertImage')" tabindex="-1"><i class="fa fa-image"></i>
166+
[disabled]="htmlMode" [hidden]="isButtonHidden('insertImage')" tabindex="-1">
167+
<fa-icon [icon]="faImage"></fa-icon>
141168
</button>
142169
<button [id]="'insertVideo-'+id" type="button" class="angular-editor-button"
143170
(click)="insertVideo()" title="Insert Video" [disabled]="htmlMode" [hidden]="isButtonHidden('insertVideo')"
144-
tabindex="-1"><i
145-
class="fa fa-video-camera"></i></button>
171+
tabindex="-1">
172+
<fa-icon [icon]="faVideo"></fa-icon>
173+
</button>
146174
<button [id]="'insertHorizontalRule-'+id" type="button" title="Horizontal Line" class="angular-editor-button"
147175
(click)="triggerCommand('insertHorizontalRule')" [disabled]="htmlMode"
148-
[hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1"><i
149-
class="fa fa-minus"></i></button>
176+
[hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1">
177+
<fa-icon [icon]="faMinus"></fa-icon>
178+
</button>
150179
</div>
151180
<div class="angular-editor-toolbar-set">
152181
<button [id]="'clearFormatting-'+id" type="button" title="Clear Formatting" class="angular-editor-button"
153182
(click)="triggerCommand('removeFormat')" [disabled]="htmlMode" [hidden]="isButtonHidden('removeFormat')"
154-
tabindex="-1"><i class='fa fa-remove'></i>
183+
tabindex="-1">
184+
<fa-icon [icon]="faRemove"></fa-icon>
155185
</button>
156186
</div>
157187
<div class="angular-editor-toolbar-set">
158188
<button [id]="'toggleEditorMode-'+id" type="button" title="HTML Code" class="angular-editor-button"
159-
(click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1"><i
160-
class='fa fa-code'></i></button>
189+
(click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1">
190+
<fa-icon [icon]="faCode"></fa-icon>
191+
</button>
161192
</div>
162193
<ng-content></ng-content>
163194
</div>

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

+32-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1+
import { DOCUMENT } from '@angular/common';
2+
import { HttpEvent, HttpResponse } from '@angular/common/http';
13
import {
24
Component,
3-
ContentChild,
45
ElementRef,
56
EventEmitter,
67
Inject,
78
Input,
89
Output,
9-
Renderer2, TemplateRef,
10+
Renderer2,
1011
ViewChild
1112
} from '@angular/core';
12-
import {AngularEditorService, UploadResponse} from './angular-editor.service';
13-
import {HttpResponse, HttpEvent} from '@angular/common/http';
14-
import {DOCUMENT} from '@angular/common';
15-
import {CustomClass} from './config';
16-
import {SelectOption} from './ae-select/ae-select.component';
13+
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';
1714
import { Observable } from 'rxjs';
15+
import { SelectOption } from './ae-select/ae-select.component';
16+
import { AngularEditorService, UploadResponse } from './angular-editor.service';
17+
import { CustomClass } from './config';
1818

1919
@Component({
2020
selector: 'angular-editor-toolbar',
@@ -109,6 +109,31 @@ export class AngularEditorToolbarComponent {
109109
}
110110
];
111111

112+
faUndo = faUndo
113+
faRedo = faRedo;
114+
faBold = faBold;
115+
faItalic = faItalic;
116+
faUnderline = faUnderline;
117+
faStrikethrough = faStrikethrough;
118+
faSubscript = faSubscript;
119+
faSuperscript = faSuperscript;
120+
faAlignLeft = faAlignLeft;
121+
faAlignCenter = faAlignCenter;
122+
faAlignRight = faAlignRight;
123+
faAlignJustify = faAlignJustify;
124+
faIndent = faIndent;
125+
faOutdent = faOutdent;
126+
faListUl = faListUl;
127+
faListOl = faListOl;
128+
faFont = faFont;
129+
faLink = faLink;
130+
faChainBroken = faChainBroken;
131+
faImage = faImage;
132+
faVideo = faVideo;
133+
faMinus = faMinus;
134+
faRemove = faRemove;
135+
faCode = faCode;
136+
112137
customClassId = '-1';
113138
// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
114139
_customClasses: CustomClass[];

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

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
1-
import {NgModule} from '@angular/core';
2-
import {AngularEditorComponent} from './angular-editor.component';
3-
import {AngularEditorToolbarComponent} from './angular-editor-toolbar.component';
4-
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
5-
import {CommonModule} from '@angular/common';
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4+
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
5+
import { AeButtonComponent } from "./ae-button/ae-button.component";
66
import { AeSelectComponent } from './ae-select/ae-select.component';
7-
import {AeButtonComponent} from "./ae-button/ae-button.component";
87
import { AeToolbarSetComponent } from './ae-toolbar-set/ae-toolbar-set.component';
8+
import { AngularEditorToolbarComponent } from './angular-editor-toolbar.component';
9+
import { AngularEditorComponent } from './angular-editor.component';
10+
11+
import { fab, faHtml5 } from '@fortawesome/free-brands-svg-icons';
12+
import { fas } from '@fortawesome/free-solid-svg-icons';
913

1014
@NgModule({
1115
imports: [
12-
CommonModule, FormsModule, ReactiveFormsModule
16+
CommonModule, FormsModule, ReactiveFormsModule, FontAwesomeModule
1317
],
1418
declarations: [AngularEditorComponent, AngularEditorToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent],
1519
exports: [AngularEditorComponent, AngularEditorToolbarComponent, AeButtonComponent, AeToolbarSetComponent]
1620
})
1721
export class AngularEditorModule {
22+
constructor(library: FaIconLibrary) {
23+
library.addIconPacks(fas, fab);
24+
}
1825
}
26+
27+

‎projects/angular-editor/src/lib/style.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
$fa-font-path: "/assets/fonts" !default;
2-
@import "~font-awesome/scss/font-awesome.scss";
31

42
a {
53
cursor: pointer;

0 commit comments

Comments
 (0)