From 6cdf56071315ef382f95efaf9e465b45b8033f37 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 8 Feb 2022 20:51:40 +0200
Subject: [PATCH] Add clear input in rich text editor

---
 .../rich-text-editor/rich-text-editor.component.scss     | 9 +++++++++
 .../rich-text-editor/rich-text-editor.component.ts       | 5 ++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
index 721812d6a..f33c65603 100644
--- a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
+++ b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
@@ -9,6 +9,7 @@
 //}
 
 .editor-wrapper {
+	position: relative;
 	border: 1px solid transparent !important;
 	border-radius: 5px;
 }
@@ -40,6 +41,14 @@
 	border: 1px solid #f44336 !important;
 }
 
+.clear {
+	position: absolute;
+	right: 5px;
+	bottom: 5px;
+	transform: translate(-50%, -50%);
+	cursor: pointer;
+}
+
 .full-width {
 	width: 100%;
 }
diff --git a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
index 0a820532b..18a325348 100644
--- a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
+++ b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
@@ -1,5 +1,6 @@
 import {Component, Input} from "@angular/core";
 import {AngularEditorConfig} from "@kolkov/angular-editor";
+import {FormControl} from "@angular/forms";
 
 @Component({
 	selector: 'rich-text-editor-component',
@@ -7,6 +8,7 @@ import {AngularEditorConfig} from "@kolkov/angular-editor";
 		<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
 			<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
 							placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
+			<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
 		</div>
 	`,
 	styleUrls: ['./rich-text-editor.component.scss']
@@ -53,6 +55,7 @@ export class RichTextEditorComponent {
 		]
 	};
 
-	constructor() {
+	get formInput(): FormControl {
+		return this.parentFormGroup.get(this.controlName);
 	}
 }