Created common component for rich text editor configuration & added rich text for dmp and dataset description.

1. library/rich-text-editor: [NEW] Common component which configures a rich text editor. 2. dataset-editor.component.html & main-info.component.html: Use <rich-text-editor-component> to allow rich text in dataset and dmp description. 3. dataset-overview.component.html & dmp-overview.component.html: Show dataset and dmp description as innerHTML. 4. dataset.module.ts & dmp.module.ts: Imported RichTextEditorModule.
2021-11-01 14:45:02 +02:00 · 2021-11-01 14:45:02 +02:00 · 7bdfcb70af
parent 6ff9ea2d05
commit 7bdfcb70af
9 changed files with 142 additions and 10 deletions
--- 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
@ -0,0 +1,45 @@
+::ng-deep .angular-editor-textarea {
+	min-height: 150px !important;
+}
+
+//.form-field-subscript-wrapper {
+//	font-size: 75%;
+//	padding-left: 12px;
+//	margin-top: 8px;
+//}
+
+.editor-wrapper {
+	border: 1px solid transparent !important;
+	border-radius: 5px;
+}
+
+::ng-deep .angular-editor-toolbar {
+	margin-left: 1px;
+	margin-right: 1px;
+}
+
+::ng-deep .angular-editor-textarea, ::ng-deep .angular-editor-toolbar {
+	border: none !important;
+}
+
+::ng-deep .angular-editor {
+	border: 1px solid #ddd !important;
+	border-radius: 5px;
+	background-color: #fff;
+}
+
+.editor-wrapper:hover, ::ng-deep .angular-editor:hover {
+	border: 1px solid #000 !important;
+}
+
+.editor-wrapper:focus-within, ::ng-deep .angular-editor:focus-within {
+	border: 1px solid #034459 !important;
+}
+
+.required.editor-wrapper, .required .editor ::ng-deep .angular-editor {
+	border: 1px solid #f44336 !important;
+}
+
+.full-width {
+	width: 100%;
+}
--- 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
@ -0,0 +1,58 @@
+import {Component, Input} from "@angular/core";
+import {AngularEditorConfig} from "@kolkov/angular-editor";
+
+@Component({
+	selector: 'rich-text-editor-component',
+	template: `
+		<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>
+		</div>
+	`,
+	styleUrls: ['./rich-text-editor.component.scss']
+})
+export class RichTextEditorComponent {
+	@Input() parentFormGroup;
+	@Input() controlName;
+	@Input() id: string = "editor1";
+	@Input() placeholder: string = "Enter text";
+	@Input() required: boolean = false;
+	@Input() wrapperClasses: string = "";
+
+	editorConfig: AngularEditorConfig = {
+		editable: true,
+		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',
+		toolbarHiddenButtons: [
+			[
+				'heading',
+				'fontName'
+			],
+			[
+				'fontSize',
+				'backgroundColor',
+				'customClasses',
+				'insertImage',
+				'insertVideo',
+				'removeFormat',
+				'toggleEditorMode'
+			]
+		]
+	};
+
+	constructor() {
+	}
+}
--- a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.module.ts
+++ b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.module.ts
@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {HttpClientModule} from "@angular/common/http";
+import {CommonUiModule} from "@common/ui/common-ui.module";
+import {CommonFormsModule} from "@common/forms/common-forms.module";
+import {AngularEditorModule} from "@kolkov/angular-editor";
+import {RichTextEditorComponent} from "@app/library/rich-text-editor/rich-text-editor.component";
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		CommonFormsModule,
+		HttpClientModule, AngularEditorModule
+	],
+	declarations: [
+		RichTextEditorComponent
+	],
+	exports: [
+		RichTextEditorComponent
+	]
+})
+export class RichTextEditorModule { }
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
@ -29,11 +29,15 @@
 				<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
 				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> -->
 				<div class="description-form">
-					<mat-form-field>
-						<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
+					<rich-text-editor-component	[parentFormGroup]="formGroup" [controlName]="'description'"
+												[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
+												[wrapperClasses]="'full-width editor ' +
+													((formGroup.get('description').dirty && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')">
+					</rich-text-editor-component>
+					<div [class]="(formGroup.get('description').dirty && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
 						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
+					</div>
 				</div>
 			</div>
 		</div>
--- a/dmp-frontend/src/app/ui/dataset/dataset.module.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
@ -27,6 +27,7 @@ import { FormProgressIndicationModule } from '../misc/dataset-description-form/c
 import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
 import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
 import { DatasetOverviewModule } from './overview/dataset-overview.module';
+import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";

@NgModule({
 	imports: [
@ -45,7 +46,8 @@ import { DatasetOverviewModule } from './overview/dataset-overview.module';
 		FormValidationErrorsDialogModule,
 		DatasetCopyDialogModule,
 		DatasetOverviewModule,
-		FormProgressIndicationModule
+		FormProgressIndicationModule,
+		RichTextEditorModule
 	],
 	declarations: [
 		DatasetListingComponent,
--- a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
+++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
@ -91,7 +91,7 @@

 					<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
 					<div class="row" *ngIf="dataset.description">
-						<p class="desc-txt">{{ dataset.description }}</p>
+						<p class="desc-txt" [innerHTML]="dataset.description"></p>
 					</div>
 					<div class="row" *ngIf="!dataset.description">
 						<span class="material-icons">horizontal_rule</span>
--- a/dmp-frontend/src/app/ui/dmp/dmp.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp.module.ts
@ -49,6 +49,7 @@ import { DmpToDatasetDialogComponent } from './dmp-to-dataset/dmp-to-dataset-dia
 import { FormProgressIndicationComponent } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component';
 import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
 import { DatasetPreviewDialogComponent } from './dataset-preview/dataset-preview-dialog.component';
+import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";

@NgModule({
 	imports: [
@ -66,7 +67,8 @@ import { DatasetPreviewDialogComponent } from './dataset-preview/dataset-preview
 		DatasetEditorDetailsModule,
 		DatasetDescriptionFormModule,
 		NgxDropzoneModule,
-		FormProgressIndicationModule
+		FormProgressIndicationModule,
+		RichTextEditorModule
 	],
 	declarations: [
 		DmpListingComponent,
--- a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
@ -25,9 +25,9 @@
 				<div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
 				<div class="hint">{{'DMP-EDITOR.FIELDS.DESCRIPTION-HINT' | translate}}</div>
 				<div class="description-form">
-					<mat-form-field>
-						<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
-					</mat-form-field>
+					<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
+												[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'">
+					</rich-text-editor-component>
 				</div>
 			</div>
 		</div>
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@ -82,7 +82,7 @@
 					</div>
 					<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
 					<div class="row" *ngIf="dmp.description">
-						<p class="desc-txt">{{ dmp.description }}</p>
+						<p class="desc-txt" [innerHTML]="dmp.description"></p>
 					</div>
 					<div class="row" *ngIf="!dmp.description">
 						<span class="material-icons">horizontal_rule</span>