diff --git a/package.json b/package.json index e316dcf9..75b9b770 100644 --- a/package.json +++ b/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" diff --git a/projects/angular-editor-app/src/app/app.component.html b/projects/angular-editor-app/src/app/app.component.html index 72931bb3..fe33b8d9 100644 --- a/projects/angular-editor-app/src/app/app.component.html +++ b/projects/angular-editor-app/src/app/app.component.html @@ -9,7 +9,7 @@

Angular Editor

(blur)="onBlur($event)"> - + diff --git a/projects/angular-editor-app/src/app/app.component.ts b/projects/angular-editor-app/src/app/app.component.ts index 28bf1cfb..181721aa 100644 --- a/projects/angular-editor-app/src/app/app.component.ts +++ b/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 = `angular editor logo`; diff --git a/projects/angular-editor-app/src/app/app.module.ts b/projects/angular-editor-app/src/app/app.module.ts index 65204404..35c78748 100644 --- a/projects/angular-editor-app/src/app/app.module.ts +++ b/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 { + +} diff --git a/projects/angular-editor/assets/FontAwesome.otf b/projects/angular-editor/assets/FontAwesome.otf deleted file mode 100644 index 401ec0f3..00000000 Binary files a/projects/angular-editor/assets/FontAwesome.otf and /dev/null differ diff --git a/projects/angular-editor/assets/fontawesome-webfont.eot b/projects/angular-editor/assets/fontawesome-webfont.eot deleted file mode 100644 index e9f60ca9..00000000 Binary files a/projects/angular-editor/assets/fontawesome-webfont.eot and /dev/null differ diff --git a/projects/angular-editor/assets/fontawesome-webfont.svg b/projects/angular-editor/assets/fontawesome-webfont.svg deleted file mode 100644 index 855c845e..00000000 --- a/projects/angular-editor/assets/fontawesome-webfont.svg +++ /dev/null @@ -1,2671 +0,0 @@ - - - - -Created by FontForge 20120731 at Mon Oct 24 17:37:40 2016 - By ,,, -Copyright Dave Gandy 2016. All rights reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/projects/angular-editor/assets/fontawesome-webfont.ttf b/projects/angular-editor/assets/fontawesome-webfont.ttf deleted file mode 100644 index 35acda2f..00000000 Binary files a/projects/angular-editor/assets/fontawesome-webfont.ttf and /dev/null differ diff --git a/projects/angular-editor/assets/fontawesome-webfont.woff b/projects/angular-editor/assets/fontawesome-webfont.woff deleted file mode 100644 index 400014a4..00000000 Binary files a/projects/angular-editor/assets/fontawesome-webfont.woff and /dev/null differ diff --git a/projects/angular-editor/assets/fontawesome-webfont.woff2 b/projects/angular-editor/assets/fontawesome-webfont.woff2 deleted file mode 100644 index 4d13fc60..00000000 Binary files a/projects/angular-editor/assets/fontawesome-webfont.woff2 and /dev/null differ diff --git a/projects/angular-editor/ng-package.json b/projects/angular-editor/ng-package.json index 19cae21c..cd96bf5a 100644 --- a/projects/angular-editor/ng-package.json +++ b/projects/angular-editor/ng-package.json @@ -3,6 +3,5 @@ "dest": "../../dist/angular-editor", "lib": { "entryFile": "src/public-api.ts" - }, - "assets": ["./assets"] + } } diff --git a/projects/angular-editor/package.json b/projects/angular-editor/package.json index ddb8fb7c..b7729a75 100644 --- a/projects/angular-editor/package.json +++ b/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 ", "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" diff --git a/projects/angular-editor/src/lib/ae-button/ae-button.component.html b/projects/angular-editor/src/lib/ae-button/ae-button.component.html index 124f8f34..332f68f1 100644 --- a/projects/angular-editor/src/lib/ae-button/ae-button.component.html +++ b/projects/angular-editor/src/lib/ae-button/ae-button.component.html @@ -1,3 +1,4 @@ - + diff --git a/projects/angular-editor/src/lib/ae-button/ae-button.component.ts b/projects/angular-editor/src/lib/ae-button/ae-button.component.ts index 4856d234..7c1833be 100644 --- a/projects/angular-editor/src/lib/ae-button/ae-button.component.ts +++ b/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(); 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 e59ddd2e..2752b15a 100644 --- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html +++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html @@ -1,69 +1,91 @@
+ [hidden]="isButtonHidden('undo')" tabindex="-1"> + + + [hidden]="isButtonHidden('redo')" tabindex="-1"> + +
+ [disabled]="htmlMode" [hidden]="isButtonHidden('bold')" tabindex="-1"> + + + tabindex="-1"> + + + tabindex="-1"> + + + + tabindex="-1"> + + + tabindex="-1"> + +
+ tabindex="-1"> + + + tabindex="-1"> + + + + + tabindex="-1"> + +
+ [disabled]="htmlMode" [hidden]="isButtonHidden('indent')" tabindex="-1"> + + + [disabled]="htmlMode" [hidden]="isButtonHidden('outdent')" tabindex="-1"> + +
+ [hidden]="isButtonHidden('insertUnorderedList')" tabindex="-1"> + + + [hidden]="isButtonHidden('insertOrderedList')" tabindex="-1"> + +
@@ -101,7 +123,9 @@ + class="color-label background"> + +
@@ -124,11 +150,11 @@
+ tabindex="-1"> + + + [hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1"> + +
+ (click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1"> + +
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 3307473c..8d19e847 100644 --- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts +++ b/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[]; diff --git a/projects/angular-editor/src/lib/angular-editor.module.ts b/projects/angular-editor/src/lib/angular-editor.module.ts index 7ae573f5..5ae767e7 100644 --- a/projects/angular-editor/src/lib/angular-editor.module.ts +++ b/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); +} } + + diff --git a/projects/angular-editor/src/lib/style.scss b/projects/angular-editor/src/lib/style.scss index b9a3420a..e4ac92a2 100644 --- a/projects/angular-editor/src/lib/style.scss +++ b/projects/angular-editor/src/lib/style.scss @@ -1,5 +1,3 @@ -$fa-font-path: "/assets/fonts" !default; -@import "~font-awesome/scss/font-awesome.scss"; a { cursor: pointer;