add markdown support for text widgets

pdb-js/src/app/app.module.ts

@@ -47,6 +47,7 @@ import { CustomizableGridComponent } from './customizable-grid/customizable-grid
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
 import { FocusDirective } from './focus.directive';
+import { MarkdownModule } from 'ngx-markdown';
 
 @NgModule({
   declarations: [
@@ -77,6 +78,7 @@ import { FocusDirective } from './focus.directive';
     FocusDirective
   ],
   imports: [
+    MarkdownModule.forRoot(),
     BrowserModule,
     AppRoutingModule,
     FormsModule,

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html

@@ -1,6 +1,6 @@
 <style>
   mat-form-field textarea {
-    height: 7em;
+    height: 20em;
   }
 </style>
 <h1 mat-dialog-title>Add Text</h1>
@@ -9,6 +9,7 @@
     <mat-label>Text</mat-label>
     <textarea matInput [(ngModel)]="text" #textElement focus></textarea>
   </mat-form-field>
+  <div>Text field supports <a href="https://spec.commonmark.org/" target="_blank" rel="noopener">Markdown</a>.</div>
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close (click)="close()">Cancel</button>

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html

@@ -29,5 +29,5 @@
     <button mat-icon-button (click)="edit()"><img src="/assets/img/edit-outline.svg"/></button>
     <button mat-icon-button (click)="delete()"><img src="/assets/img/recycle-bin-line.svg"/></button>
   </div>
-  <p *ngFor="let line of lines()">{{line}}</p>
+  <markdown [data]="this.data.text"></markdown>
 </div>