Improvement: Showing Markdown as HTML

Author: dearrudam

.gitignore

@@ -1 +1,2 @@
 node_modules
+.vscode/

front-end/package-lock.json

@@ -13,8 +13,6 @@
   },
   "private": true,
   "dependencies": {
-    "node-forge": ">=1.3.0",
-    "shelljs": ">=0.8.5",
     "@angular/common": "^12.2.16",
     "@angular/core": "^12.2.16",
     "@angular/forms": "^12.2.16",
@@ -28,13 +26,14 @@
     "cordova-browser": "^6.0.0",
     "core-js": "^2.5.4",
     "firebase": "^9.8.0",
+    "marked": "^4.0.15",
+    "node-forge": ">=1.3.0",
     "rxjs": "^6.6.0",
+    "shelljs": ">=0.8.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "node-forge": ">=1.3.0",
-    "shelljs": ">=0.8.5",
     "@angular-devkit/architect": "~0.1202.17",
     "@angular-devkit/build-angular": "^12.2.17",
     "@angular-devkit/core": "~12.2.17",
@@ -47,6 +46,7 @@
     "@ionic/lab": "^3.2.11",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/marked": "^4.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "cordova-plugin-device": "^2.0.2",
@@ -62,7 +62,9 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "node-forge": ">=1.3.0",
     "protractor": "~7.0.0",
+    "shelljs": ">=0.8.5",
     "ts-node": "^8.0.3",
     "tslint": "~6.1.0",
     "typescript": "~4.3.5"

front-end/package.json

@@ -1,6 +1,10 @@
 <ion-header>
   <ion-toolbar>
-    <ion-menu-button></ion-menu-button>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+      <ion-menu-button></ion-menu-button>
+    
+    </ion-buttons>
     <ion-title>
       Cadastro de vaga
     </ion-title>
@@ -15,12 +19,8 @@
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Descrição</ion-label>
-      <ion-textarea
-        [ngModel]="vaga?.body"
-        rows="15"
-        cols="20"
-        placeholder="Digite da vaga"
-      ></ion-textarea>
+      <div [innerHTML]="getContent(vaga?.body)"></div>
+    
     </ion-item>
     <ion-item>
       <ion-label position="floating">Labels</ion-label>

front-end/src/app/pages/cadastro-vaga/cadastro-vaga.page.html

@@ -1,34 +1,55 @@
-import {VagaService} from 'src/app/service/vaga.service';
-import {Router, ActivatedRoute} from '@angular/router';
-import {Component, OnInit} from '@angular/core';
-import {Vaga} from 'src/app/model/vaga.model';
+import { VagaService } from "src/app/service/vaga.service";
+import { Router, ActivatedRoute } from "@angular/router";
+import { Component, OnInit } from "@angular/core";
+import { Vaga } from "src/app/model/vaga.model";
+import { DomSanitizer } from "@angular/platform-browser";
+import { marked } from "marked";
 
 @Component({
-  selector: 'app-cadastro-vaga',
-  templateUrl: './cadastro-vaga.page.html',
-  styleUrls: ['./cadastro-vaga.page.scss']
+  selector: "app-cadastro-vaga",
+  templateUrl: "./cadastro-vaga.page.html",
+  styleUrls: ["./cadastro-vaga.page.scss"],
 })
 export class CadastroVagaPage implements OnInit {
   constructor(
     private route: ActivatedRoute,
-    private vagaService: VagaService
+    private vagaService: VagaService,
+    private sanitizer: DomSanitizer
   ) {}
 
+  private renderer = new marked.Renderer();
+  private defaultOptions: marked.MarkedOptions = {};
+
   vaga: Vaga;
   ngOnInit() {
+    this.applyDefaultOptions();
     this.vagaService
-      .getVagaById(this.route.snapshot.params['id'])
-      .subscribe(result => {
+      .getVagaById(this.route.snapshot.params["id"])
+      .subscribe((result) => {
         this.vaga = result;
       });
   }
 
+  getContent(content: string) {
+    const html = content ? marked(content, this.defaultOptions) : "";
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
   getLabels(labels) {
     if (labels) {
-      let labelMap = labels.map(a => a.name);
+      let labelMap = labels.map((a) => a.name);
       if (labelMap.length > 0) {
-        return labelMap.reduce(a => a + ', ');
+        return labelMap.reduce((a) => a + ", ");
       }
     }
   }
+
+  private applyDefaultOptions() {
+    // Native links will open in new tab
+    this.renderer.link = function (href, title, text) {
+      title = title || href;
+      return `<a target="_blank" rel="noopener" href="${href}" title="${title}">${text}</a>`;
+    };
+    this.defaultOptions.renderer = this.renderer;
+  }
 }

front-end/src/app/pages/cadastro-vaga/cadastro-vaga.page.ts

@@ -2,6 +2,7 @@ import {Vaga} from './../../model/vaga.model';
 import {Component, OnInit} from '@angular/core';
 import {VagaService} from 'src/app/service/vaga.service';
 import {Router} from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-vagas',

front-end/src/app/pages/vagas/vagas.page.ts

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowJs": true,
     "baseUrl": "./",
     "downlevelIteration": true,
     "outDir": "./dist/out-tsc",