Adds table of contents to user guide

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html

@@ -1 +1,11 @@
-<div id='userguide' [innerHTML]="guideHTML"></div>
+<!-- <div class="container-fluid">
+	<div class="row">
+		<span class="custom-header">User Guide Editor</span>
+	</div>
+</div> -->
+<!-- <div id='userguide' [innerHTML]="guideHTML"></div> -->
+<div class="container-fluid">
+	<div class="row">
+		<iframe *ngIf="guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl"></iframe>
+	</div>
+</div>

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss

@@ -1,4 +1,4 @@
-:host ::ng-deep .href{
+:host ::ng-deep .href {
 	color: rgb(0, 0, 238) !important;
 }
 
@@ -7,5 +7,21 @@
 }
 
 #userguide {
-	margin: 20px;
+	// margin: 20px;
+}
+
+.custom-header {
+	font-size: 20px;
+	letter-spacing: 0px;
+	color: #212121;
+	margin-top: 67px;
+	margin-bottom: 38px;
+	opacity: 1;
+}
+
+.iframe {
+	width: 100%;
+	height: calc(100vh - 80px);
+	margin: 0px;
+	border: none;
 }

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, AfterViewChecked } from '@angular/core';
 import { UserGuideService } from '@app/core/services/user-guide/user-guide.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/internal/operators/takeUntil';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
 	selector: 'app-user-guide-content',
@@ -13,6 +13,7 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit,
 
 
 	guideHTML: any;
+	guideHTMLUrl: SafeResourceUrl;
 	private scrollEvent: EventListener;
 
 	constructor(
@@ -28,12 +29,15 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit,
 				const blob = new Blob([response.body], { type: 'text/html' });
 				this.readBlob(blob);
 
+				// this.guideHTMLUrl = URL.createObjectURL(blob);
+				this.guideHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
+				console.log(this.guideHTMLUrl)
 			});
 	}
 
 	ngAfterViewChecked(): void {
 		this.parse();
-}
+	}
 
 	readBlob(blob: Blob) {
 		const fr = new FileReader();
@@ -45,7 +49,7 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit,
 	}
 
 	scroll(ev: Event) {
-    document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({behavior: 'smooth', block: 'start'});
+		document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({ behavior: 'smooth', block: 'start' });
 	}
 
 	private parse() {