113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit } from "@angular/core";
|
|
import { FormControl } from "@angular/forms";
|
|
import { AngularEditorConfig } from "@kolkov/angular-editor";
|
|
import { Subscription } from "rxjs";
|
|
|
|
@Component({
|
|
selector: 'rich-text-editor-component',
|
|
template: `
|
|
<div class="editor-wrapper" [class]="wrapperClasses">
|
|
<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
|
|
[config]="editorConfig" [formControl]="form"
|
|
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"
|
|
(paste)="pasteWithoutFormatting($event)"></angular-editor>
|
|
<mat-icon *ngIf="form.value && editable" (click)="parentFormGroup.get(controlName).patchValue('')" class="clear">close</mat-icon>
|
|
<!-- <mat-form-field class="full-width editor">
|
|
<mat-label>{{(placeholder? (placeholder | translate) : '')}}</mat-label>
|
|
<textarea matInput [formControl]="form" rows="5"></textarea>
|
|
</mat-form-field> -->
|
|
</div>
|
|
`,
|
|
styleUrls: ['./rich-text-editor.component.scss'],
|
|
// TODO: performance issue with this control. changed the change detection strategy in case it improves
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class RichTextEditorComponent implements OnInit, OnDestroy {
|
|
@Input() form: FormControl;
|
|
@Input() id: string = "editor1";
|
|
@Input() placeholder: string = "Enter text";
|
|
@Input() required: boolean = false;
|
|
@Input() wrapperClasses: string = "";
|
|
@Input() editable: boolean = true;
|
|
|
|
@Input() formTouchEvent: EventEmitter<any>;
|
|
private formTouchSubscription: Subscription;
|
|
|
|
editorConfig: AngularEditorConfig = {
|
|
editable: this.editable,
|
|
spellcheck: true,
|
|
height: 'auto',
|
|
minHeight: '0',
|
|
maxHeight: 'auto',
|
|
width: '100%',
|
|
minWidth: '0',
|
|
translate: 'yes',
|
|
enableToolbar: true,
|
|
showToolbar: true,
|
|
placeholder: '',
|
|
defaultParagraphSeparator: '',
|
|
defaultFontName: '',
|
|
defaultFontSize: '',
|
|
sanitize: true,
|
|
toolbarPosition: 'top',
|
|
customClasses: [
|
|
{ name: 'H1 header', class: '', tag: 'h1' },
|
|
{ name: 'H2 header', class: '', tag: 'h2' },
|
|
{ name: 'H3 header', class: '', tag: 'h3' },
|
|
{ name: 'H4 header', class: '', tag: 'h4' },
|
|
{ name: 'H5 header', class: '', tag: 'h5' },
|
|
{ name: 'H6 header', class: '', tag: 'h6' }
|
|
],
|
|
toolbarHiddenButtons: [
|
|
[
|
|
'heading',
|
|
'fontName'
|
|
],
|
|
[
|
|
'fontSize',
|
|
// 'backgroundColor',
|
|
// 'customClasses',
|
|
'insertImage',
|
|
'insertVideo',
|
|
// 'removeFormat',
|
|
'toggleEditorMode'
|
|
]
|
|
]
|
|
};
|
|
|
|
|
|
ngOnInit(): void {
|
|
if (this.formTouchEvent) {
|
|
this.observeFormStatus();
|
|
}
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
if (this.formTouchSubscription) {
|
|
this.formTouchSubscription.unsubscribe();
|
|
}
|
|
}
|
|
|
|
ngAfterContentInit() {
|
|
this.editorConfig.editable = this.editable;
|
|
}
|
|
|
|
pasteWithoutFormatting($event) {
|
|
$event.preventDefault();
|
|
const text = $event.clipboardData.getData("text/plain");
|
|
window.document.execCommand("insertText", false, text);
|
|
}
|
|
|
|
private observeFormStatus(): void {
|
|
this.formTouchSubscription = this.formTouchEvent
|
|
.subscribe(
|
|
next => {
|
|
if(next) {
|
|
this.form.markAsTouched();
|
|
this.form.updateValueAndValidity();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|