add preview for markup

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

@@ -24,7 +24,6 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {})
   ],
-  //declarations: [VisualizationPageComponent],
   declarations: [],
   exports: [RouterModule]
 })

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

@@ -1,15 +1,36 @@
 <style>
+
+  markdown {
+    --mdc-dialog-supporting-text-color: black;
+  }
+  .mat-mdc-dialog-content {
+    display: flex;
+    justify-content: center;
+    height: 22em;
+  }
+  .mat-mdc-dialog-content > div {
+    width:50%;
+  }
+  .preview {
+    margin-left: 0.5em;
+    overflow: auto;
+  }
   mat-form-field textarea {
     height: 20em;
   }
 </style>
 <h1 mat-dialog-title>Add Text</h1>
 <div mat-dialog-content>
-  <mat-form-field class="pdb-form-full-width">
-    <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/" class="external-link" target="_blank" rel="noopener">Markdown</a>.</div>
+  <div>
+    <mat-form-field class="pdb-form-full-width">
+      <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/" class="external-link" target="_blank" rel="noopener">Markdown</a>.</div>
+  </div>
+  <div class="preview">
+    <markdown [data]="this.text"></markdown>
+  </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.ts

@@ -36,7 +36,7 @@ export class TextWidgetComponent {
   edit() {
     this.dialog.open(AddTextDialogComponent,{
       data: {text : this.data.text},
-      width: '600px'
+      width: '800px'
     }).afterClosed().subscribe((text?: string) => {
       if (text !== undefined) {
         this.data.text = text;

pdb-js/src/styles.scss

@@ -223,8 +223,27 @@ a.external-link:after {
 
 /* styles for markdown*/
 markdown blockquote {
-  border-left: 4px grey solid;
+  border-left: 3px grey solid;
   display: block;
-  margin-left: 2em;
-  padding-left: 0.5em;
+  margin: 1em 0 1em 2em;
+  padding: 0.5em 0 0.5em 0.5em;
+}
+
+markdown table {
+  border-collapse: collapse;
+}
+
+markdown table th, markdown table td {
+  border: solid 1px black;
+  padding: 0.4em;
+}
+markdown thead {
+  border-bottom: 2px black solid;
+}
+markdown tfoot {
+  border-top: 2px black solid;
+}
+
+markdown pre {
+  font-family: monospace;
 }