pdb-js/angular.json

@@ -33,7 +33,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/marked/marked.min.js"
+            ]
           },
           "configurations": {
             "production": {

pdb-js/package.json

@@ -23,7 +23,9 @@
     "@angular/platform-browser": "^15.0.2",
     "@angular/platform-browser-dynamic": "^15.0.2",
     "@angular/router": "^15.0.2",
+    "marked": "^4.2.12",
     "moment": "^2.29.1",
+    "ngx-markdown": "^15.1.2",
     "rxjs": "~7.5.0",
     "rxjs-compat": "^6.6.7",
     "tslib": "^2.3.0",
@@ -34,6 +36,7 @@
     "@angular/cli": "^15.0.2",
     "@angular/compiler-cli": "^15.0.2",
     "@types/jasmine": "~3.10.0",
+    "@types/marked": "^4.0.8",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.10.0",
     "karma": "~6.3.0",

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>

pdb-js/src/styles.scss

@@ -190,7 +190,8 @@ mat-form-field.pdb-form-mid {
 mat-form-field.pdb-form-wide {
   width: 10em;
 }
-pdb-visualization-page .mat-mdc-form-field-subscript-wrapper  {
+pdb-visualization-page .mat-mdc-form-field-subscript-wrapper,
+app-add-text-dialog .mat-mdc-form-field-subscript-wrapper  {
   display: none;/**/
 }
 
@@ -207,3 +208,23 @@ pdb-visualization-page .mat-mdc-form-field-subscript-wrapper  {
   top: 0.2em;
   line-height: 1em;
 }
+
+a[target="_blank"]:after {
+  content: "";
+  display: inline-block;
+  background: url("assets/img/external-link.svg") no-repeat;
+  background-size: 1em;
+  width: 1em;
+  height: 1em;
+  margin-left: 0.3em;
+  vertical-align: text-top;
+}
+
+
+/* styles for markdown*/
+markdown blockquote {
+  border-left: 4px grey solid;
+  display: block;
+  margin-left: 2em;
+  padding-left: 0.5em;
+}