Description boxes in admin forms replaced with rich text editor <angular-editor>.

1. dataset-profile-editor-composite-field.component.ts & dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts: Initialize AngularEditorConfig.
2. dataset-profile-editor-composite-field.component.html & dataset-profile-editor-section.component.html & dataset-profile-editor.component.html: Use <angular-editor> in description.
3. multiple-auto-complete.component.html & dataset-profile-listing.component.html & form-section.component.html: Show description as html.
4. dataset-profile.module.ts: Imported HttpClientModule, AngularEditorModule (needed for <angular-editor>).
5. available-profiles.component.html: Show description as html, under the Dataset Template title, not as tooltip (matTooltip does not receive html).
6. available-profiles.component.ts: Added styleUrls: ['available-profiles.component.scss'].
7. available-profiles.component.scss: [NEW] Added css for class "list-option" to cut description if too long.
8. form-composite-title.component.html: Show description and extendedDescription as html | Add view more/less functionality to show/hide extendedDescription.
9. form-composite-title.component.ts: Added "public showExtendedDescription: boolean = false;" field.
10. form-composite-title.component.scss: Added css for "more" class, to make "view more/less" seem like link.
11. assets/i18n/: In language files added DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE (-LESS).
12. assets/styles.css: Added css for <angular-editor>, to be similar to the other text areas and forms.

dmp-frontend/package.json

@@ -19,6 +19,7 @@
     "@angular/forms": "^12.2.7",
     "@angular/material-moment-adapter": "^12.2.7",
     "@angular/platform-browser": "^12.2.7",
+    "@kolkov/angular-editor": "^1.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@swimlane/ngx-datatable": "^20.0.0",

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html

@@ -45,7 +45,7 @@
 							<div class="title-fn">
 								<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
 								<br *ngIf="_subtitleFn(item)">
-								<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+								<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small>
 							</div>
 							<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 						</div>

dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts

@@ -51,6 +51,8 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component
 import { ParseStatus } from './listing/pipe/parse-status.pipe';
 import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
 import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
+import {HttpClientModule} from "@angular/common/http";
+import {AngularEditorModule} from "@kolkov/angular-editor";
 
 
 
@@ -68,7 +70,8 @@ import { DatasetProfileTableOfContentsInternalSection } from './table-of-content
 		DragDropModule,
 		MatBadgeModule,
 		DragulaModule,
-		AutoCompleteModule
+		AutoCompleteModule,
+		HttpClientModule, AngularEditorModule,
 	],
 	declarations: [
 		DatasetProfileListingComponent,

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html

@@ -77,17 +77,19 @@
 		</div>
 	</div>
 	<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
-		<div class="row" *ngIf="showDescription">
-			<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
-				<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
-				[formControl]="this.form.get('description')">
-			</mat-form-field>
+		<div *ngIf="showDescription" class="mb-4">
+			<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
+			<div class="editor-wrapper row">
+				<angular-editor class="full-width editor" id="editor1" [formControl]="form.get('description')" [config]="editorConfig"
+								placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"></angular-editor>
+			</div>
 		</div>
-		<div class="row" *ngIf="showExtendedDescription">
-			<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
-				<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
-				[formControl]="this.form.get('extendedDescription')"/>
-			</mat-form-field>
+		<div *ngIf="showExtendedDescription" class="mb-4">
+			<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5>
+			<div class="editor-wrapper row">
+				<angular-editor class="full-width editor" id="editor2" [formControl]="form.get('extendedDescription')" [config]="editorConfig"
+								placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"></angular-editor>
+			</div>
 		</div>
 		<div class="row" *ngIf="showAdditionalInfo">
 			<mat-form-field class="col p-0 underline-line-field" appearance="legacy">

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

@@ -24,6 +24,7 @@ import { Subject } from 'rxjs';
 import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators';
 import { GENERAL_ANIMATIONS } from '../../animations/animations';
 import { BaseComponent } from '@common/base/base.component';
+import {AngularEditorConfig} from "@kolkov/angular-editor";
 
 @Component({
 	selector: 'app-dataset-profile-editor-composite-field-component',
@@ -32,6 +33,39 @@ import { BaseComponent } from '@common/base/base.component';
 	animations:[GENERAL_ANIMATIONS]
 })
 export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges {
+	editorConfig: AngularEditorConfig = {
+		editable: true,
+		spellcheck: true,
+		height: 'auto',
+		minHeight: '0',
+		maxHeight: 'auto',
+		width: '100%',
+		minWidth: '0',
+		translate: 'yes',
+		enableToolbar: true,
+		showToolbar: true,
+		placeholder: 'Enter text here...',
+		defaultParagraphSeparator: '',
+		defaultFontName: '',
+		defaultFontSize: '',
+		sanitize: true,
+		toolbarPosition: 'top',
+		toolbarHiddenButtons: [
+			[
+				'heading',
+				'fontName'
+			],
+			[
+				'fontSize',
+				'backgroundColor',
+				'customClasses',
+				'insertImage',
+				'insertVideo',
+				'removeFormat'//,
+				// 'toggleEditorMode'
+			]
+		]
+	};
 
 	@Input() form: FormGroup;
 	@Input() indexPath: string;

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html

@@ -29,14 +29,13 @@
 	</mat-form-field> -->
 	<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
 	<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
-	<mat-form-field class="col-12">
-		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
-		formControlName="description">
-		<!-- <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
-	</mat-form-field>
-
+	<div class="col-12">
+		<div class="editor-wrapper">
+			<angular-editor class="editor" id="editor" formControlName="description" [config]="editorConfig"
+							placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"></angular-editor>
+		</div>
+	</div>
 
-	
 	<!-- <div class="col-md-6">
 		<label>Default Visibility</label>
 		<mat-radio-group formControlName="defaultVisibility" class="full-width">

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts

@@ -6,6 +6,7 @@ import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-
 import { BaseComponent } from '@common/base/base.component';
 import { Guid } from '@common/types/guid';
 import { takeUntil } from 'rxjs/operators';
+import {AngularEditorConfig} from "@kolkov/angular-editor";
 
 @Component({
 	selector: 'app-dataset-profile-editor-section-component',
@@ -14,6 +15,40 @@ import { takeUntil } from 'rxjs/operators';
 })
 
 export class DatasetProfileEditorSectionComponent extends BaseComponent implements OnInit {
+	editorConfig: AngularEditorConfig = {
+		editable: true,
+		spellcheck: true,
+		height: 'auto',
+		minHeight: '0',
+		maxHeight: 'auto',
+		width: '100%',
+		minWidth: '0',
+		translate: 'yes',
+		enableToolbar: true,
+		showToolbar: true,
+		placeholder: 'Enter text here...',
+		defaultParagraphSeparator: '',
+		defaultFontName: '',
+		defaultFontSize: '',
+		sanitize: true,
+		toolbarPosition: 'top',
+		toolbarHiddenButtons: [
+			[
+				'heading',
+				'fontName'
+			],
+			[
+				'fontSize',
+				'backgroundColor',
+				'customClasses',
+				'insertImage',
+				'insertVideo',
+				'removeFormat',
+				'toggleEditorMode'
+			]
+		]
+	};
+
 	@Input() form: FormGroup;
 	//@Input() dataModel: SectionEditorModel;
 	@Input() indexPath: string;

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html

@@ -156,14 +156,17 @@
 							<div class="heading">1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *</div>
 							<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
 							<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
-							<mat-form-field class="full-width basic-info-input">
-								<textarea matInput [formControl]="form.get('description')" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="5"
-									placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'| translate}}">
-								</textarea>
-								<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED'
-									| translate}}
-								</mat-error>
-							</mat-form-field>
+							<div class="full-width basic-info-input">
+								<div class="editor-wrapper" [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''">
+									<angular-editor id="editor" class="editor" [formControl]="form.get('description')" [config]="editorConfig"
+													placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER' | translate}}"></angular-editor>
+								</div>
+								<div [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
+									<mat-error>
+										{{'GENERAL.VALIDATION.REQUIRED'| translate}}
+									</mat-error>
+								</div>
+							</div>
 						</div>
 	
 						<div class="col-12">

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts

@@ -45,6 +45,7 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil
 import { UserService } from '@app/core/services/user/user.service';
 import { MatInput } from '@angular/material/input';
 import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
+import {AngularEditorConfig} from "@kolkov/angular-editor";
 
 
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@@ -57,6 +58,40 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
 	providers:[VisibilityRulesService]
 })
 export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent implements OnInit {
+	editorConfig: AngularEditorConfig = {
+		editable: true,
+		spellcheck: true,
+		height: 'auto',
+		minHeight: '0',
+		maxHeight: 'auto',
+		width: '100%',
+		minWidth: '0',
+		translate: 'yes',
+		enableToolbar: true,
+		showToolbar: true,
+		placeholder: 'Enter text here...',
+		defaultParagraphSeparator: '',
+		defaultFontName: '',
+		defaultFontSize: '',
+		sanitize: true,
+		toolbarPosition: 'top',
+		toolbarHiddenButtons: [
+			[
+				'heading',
+				'fontName'
+			],
+			[
+				'fontSize',
+				'backgroundColor',
+				'customClasses',
+				'insertImage',
+				'insertVideo',
+				'removeFormat',
+				'toggleEditorMode'
+			]
+		]
+	};
+
 	canDeactivate(): boolean {
 		return !this.form.dirty;
 	}

dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html

@@ -34,7 +34,7 @@
 				<ng-container cdkColumnDef="description">
 					<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
 					</mat-header-cell>
-					<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
+					<mat-cell *matCellDef="let row"><span [innerHTML]="row.description"></span></mat-cell>
 				</ng-container>
 
 				<!-- Column Definition: Created -->

dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html

@@ -1,8 +1,12 @@
 <h4 mat-dialog-title>{{ 'DMP-EDITOR.DATASET-TEMPLATE-LIST.TITLE' | translate }}</h4>
 <div mat-dialog-content>
 	<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" >
-		<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' matTooltip="{{profile.description}}">
-			{{profile.label}}
+		<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' class="mb-1">
+			<div class="list-option">
+				{{profile.label}}
+				<br *ngIf="profile.description">
+				<small *ngIf="profile.description" [innerHTML]="profile.description"></small>
+			</div>
 		</mat-list-option>
 	</mat-selection-list>
 	<p>

dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss

@@ -0,0 +1,7 @@
+.list-option {
+	flex-grow: 1;
+    white-space: nowrap;
+    width: calc(100% - 16px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.ts

@@ -9,6 +9,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+	styleUrls: ['available-profiles.component.scss'],
 	selector: 'app-available-profiles-component',
 	templateUrl: 'available-profiles.component.html',
 })

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html

@@ -12,7 +12,17 @@
 </div>
 
 
-<h6 *ngIf="form.get('description').value  && !isChild" class="col-12">{{form.get('description').value}}</h6>
-<h6 *ngIf="form.get('extendedDescription').value  && !isChild" class="col-12">
-	<i>{{form.get('extendedDescription').value}}</i>
-</h6>
+<h6 *ngIf="form.get('description').value  && !isChild" class="col-12" [innerHTML]="form.get('description').value"></h6>
+
+<div class="col-12 mt-3 mb-3">
+	<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
+		<span class="more d-flex justify-content-center">{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE' | translate}}</span>
+	</div>
+	<div *ngIf="showExtendedDescription">
+		<h6 *ngIf="form.get('extendedDescription').value  && !isChild" [innerHTML]="form.get('extendedDescription').value">
+		</h6>
+		<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
+			{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-LESS' | translate}}
+		</span>
+	</div>
+</div>

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss

@@ -21,3 +21,11 @@ h6 {
 	text-transform: none;
 	font-weight: 400;
 }
+
+.more {
+	text-decoration: underline;
+	color: #F7DD72;
+	cursor: pointer;
+	font-size: 1rem;
+	font-weight: 400;
+}

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts

@@ -13,6 +13,8 @@ export class FormCompositeTitleComponent implements OnInit {
 	@Input() isChild: Boolean = false;
   @Input() tocentry:ToCEntry;
 
+  public showExtendedDescription: boolean = false;
+
   constructor() { }
 
   ngOnInit() {

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html

@@ -7,7 +7,7 @@
 				</mat-panel-title>
 			</mat-expansion-panel-header>
 			<mat-panel-description class="col-12">
-				<h6 class='panel-desc' *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
+				<h6 class='panel-desc' *ngIf="form.get('description').value" [innerHTML]="form.get('description').value"></h6>
 			</mat-panel-description>
 			<ng-container *ngIf="!tocentry else tocentryCase">
 			<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
@@ -135,4 +135,4 @@
 		
 	</ng-container>
 
-</ng-template>
+</ng-template>

dmp-frontend/src/assets/i18n/de.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "An error occured.",
 			"MESSAGE": "Message: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1810,4 +1816,4 @@
 		"FINALIZED": "Finalized",
 		"DELETED": "Deleted"
 	}
-}
+}

dmp-frontend/src/assets/i18n/en.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "An error occured.",
 			"MESSAGE": "Message: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1810,4 +1816,4 @@
 		"FINALIZED": "Finalized",
 		"DELETED": "Deleted"
 	}
-}
+}

dmp-frontend/src/assets/i18n/es.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "An error occured.",
 			"MESSAGE": "Message: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1810,4 +1816,4 @@
 		"FINALIZED": "Finalizado",
 		"DELETED": "Deleted"
 	}
-}
+}

dmp-frontend/src/assets/i18n/gr.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "Προέκυψε κάποιο σφάλμα.",
 			"MESSAGE": "Μήνυμα: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "Δείτε περισσότερα",
+				"VIEW-LESS": "Δείτε λιγότερα"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1810,4 +1816,4 @@
 		"FINALIZED": "Οριστικοποιημένα",
 		"DELETED": "Deleted"
 	}
-}
+}

dmp-frontend/src/assets/i18n/pt.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "Um erro ocorreu.",
 			"MESSAGE": "Mensangem: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1818,4 +1824,4 @@
 	"Index: 0, Size: 0" : "Ficheiro a importar deverá ser em formato .json",
 	"Field value of": "O campo",
 	"must be filled": "deve ser preenchido"
-}
+}

dmp-frontend/src/assets/i18n/sk.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "An error occured.",
 			"MESSAGE": "Message: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1810,4 +1816,4 @@
 		"FINALIZED": "Dokončené",
 		"DELETED": "Deleted"
 	}
-}
+}

dmp-frontend/src/assets/i18n/sr.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "An error occured.",
 			"MESSAGE": "Message: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {

dmp-frontend/src/assets/i18n/tr.json

@@ -1246,6 +1246,12 @@
 		"ERRORS":{
 			"ERROR-OCCURED": "An error occured.",
 			"MESSAGE": "Message: "
+		},
+		"QUESTION": {
+			"EXTENDED-DESCRIPTION": {
+				"VIEW-MORE": "View more",
+				"VIEW-LESS": "View less"
+			}
 		}
 	},
 	"DATASET-CREATE-WIZARD": {
@@ -1810,4 +1816,4 @@
 		"FINALIZED": "Tamamlandı",
 		"DELETED": "Silindi"
 	}
-}
+}

dmp-frontend/src/styles.scss

@@ -251,4 +251,48 @@
 
 .translateY-3{
 	transform:translateY(3px);
-}
+}
+
+// CSS for <angular-editor> (@kolkov/angular-editor)
+.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;
+}
+
+.angular-editor-toolbar {
+	margin-left: 1px;
+	margin-right: 1px;
+}
+
+.angular-editor-textarea, .angular-editor-toolbar {
+	border: none !important;
+}
+
+.angular-editor {
+	border: 1px solid #ddd !important;
+	border-radius: 5px;
+	background-color: #fff;
+}
+
+.editor-wrapper:hover, .angular-editor:hover {
+	border: 1px solid #000 !important;
+}
+
+.editor-wrapper:focus-within, .angular-editor:focus-within {
+	border: 1px solid #034459 !important;
+}
+
+.required.editor-wrapper, .required .editor .angular-editor {
+	border: 1px solid #f44336 !important;
+}
+// end of CSS for <angular-editor> (@kolkov/angular-editor)