Skip to content

Commit 61f7972

Browse files
vbakkevbakke
committed
Fixed markdown rendering
1 parent 64c6424 commit 61f7972

7 files changed

Lines changed: 79 additions & 66 deletions

File tree

‎src/app/component/activity-description/activity-description.component.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ <h1>
55
</h1>
66

77
<div class="example-action-buttons">
8-
<button mat-raised-button (click)="openall()">Expand All</button>
9-
<button mat-raised-button (click)="closeall()">Collapse All</button>
8+
<button mat-raised-button (click)="openAll()">Expand All</button>
9+
<button mat-raised-button (click)="closeAll()">Collapse All</button>
1010
</div>
1111

1212
<mat-accordion multi="true">
13-
<mat-expansion-panel>
13+
<mat-expansion-panel [expanded]="true">
1414
<mat-expansion-panel-header>
1515
<mat-panel-title>
1616
<b>UUID</b>
@@ -19,40 +19,40 @@ <h1>
1919
<p id="uuid" [innerHTML]="currentActivity.uuid"></p>
2020
</mat-expansion-panel>
2121

22-
<mat-expansion-panel [expanded]="true">
22+
<mat-expansion-panel *ngIf="currentActivity.description?.hasContent()">
2323
<mat-expansion-panel-header>
2424
<mat-panel-title>
2525
<b>Description</b>
2626
</mat-panel-title>
2727
</mat-expansion-panel-header>
28-
<p id="description" [innerHTML]="currentActivity.description"></p>
28+
<p id="description" [innerHTML]="currentActivity.description?.render()"></p>
2929
</mat-expansion-panel>
3030

31-
<mat-expansion-panel>
31+
<mat-expansion-panel *ngIf="currentActivity.risk?.hasContent()">
3232
<mat-expansion-panel-header>
3333
<mat-panel-title>
3434
<b>Risk</b>
3535
</mat-panel-title>
3636
</mat-expansion-panel-header>
37-
<p id="risk" [innerHTML]="currentActivity.risk"></p>
37+
<p id="risk" [innerHTML]="currentActivity.risk?.render()"></p>
3838
</mat-expansion-panel>
3939

40-
<mat-expansion-panel>
40+
<mat-expansion-panel *ngIf="currentActivity.measure?.hasContent()">
4141
<mat-expansion-panel-header>
4242
<mat-panel-title>
4343
<b>Measure</b>
4444
</mat-panel-title>
4545
</mat-expansion-panel-header>
46-
<p id="measure" [innerHTML]="currentActivity.measure"></p>
46+
<p id="measure" [innerHTML]="currentActivity.measure?.render()"></p>
4747
</mat-expansion-panel>
4848

49-
<mat-expansion-panel *ngIf="currentActivity.implementationGuide">
49+
<mat-expansion-panel *ngIf="currentActivity.implementationGuide?.hasContent()">
5050
<mat-expansion-panel-header>
5151
<mat-panel-title>
5252
<b>Implementation Guide</b>
5353
</mat-panel-title>
5454
</mat-expansion-panel-header>
55-
<p id="implementationGuide" [innerHTML]="currentActivity.implementationGuide"></p>
55+
<p id="implementationGuide" [innerHTML]="currentActivity.implementationGuide?.render()"></p>
5656
</mat-expansion-panel>
5757

5858
<mat-expansion-panel>
@@ -93,13 +93,13 @@ <h1>
9393
</mat-accordion>
9494
</mat-expansion-panel>
9595

96-
<mat-expansion-panel>
96+
<mat-expansion-panel *ngIf="currentActivity.assessment?.hasContent()">
9797
<mat-expansion-panel-header>
9898
<mat-panel-title>
9999
<b>Assessment</b>
100100
</mat-panel-title>
101101
</mat-expansion-panel-header>
102-
<p id="assessment" [innerHTML]="currentActivity.assessment"></p>
102+
<p id="assessment" [innerHTML]="currentActivity.assessment?.render()"></p>
103103
</mat-expansion-panel>
104104

105105
<mat-expansion-panel>
@@ -245,7 +245,7 @@ <h1>
245245
<b>Comments</b>
246246
</mat-panel-title>
247247
</mat-expansion-panel-header>
248-
<p id="comments" [innerHTML]="currentActivity.comments"></p>
248+
<p id="comments" [innerHTML]="currentActivity.comments?.render()"></p>
249249
</mat-expansion-panel>
250250
</mat-accordion>
251251

‎src/app/component/activity-description/activity-description.component.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Component, ViewChildren, QueryList, OnInit } from '@angular/core';
22
import { MatAccordion } from '@angular/material/expansion';
33
import { ActivatedRoute } from '@angular/router';
44
import { LoaderService } from '../../service/loader/data-loader.service';
5-
import * as md from 'markdown-it';
65
import { Activity, ActivityStore } from '../../model/activity-store';
76
import { DataStore } from 'src/app/model/data-store';
87

@@ -12,7 +11,6 @@ import { DataStore } from 'src/app/model/data-store';
1211
styleUrls: ['./activity-description.component.css'],
1312
})
1413
export class ActivityDescriptionComponent implements OnInit {
15-
markdown: md = md();
1614
currentActivity: Partial<Activity> = {};
1715

1816
TimeLabel: string = '';
@@ -54,22 +52,23 @@ export class ActivityDescriptionComponent implements OnInit {
5452
this.ResourceLabel = dataStore.getMetaString('labels', activity.difficultyOfImplementation.resources);
5553
this.UsefulnessLabel = dataStore.getMetaString('labels', activity.usefulness);
5654

57-
this.openall();
55+
setTimeout(() => { this.openAll() }, 1);
5856
})
5957
.catch(err => {
6058
console.error('Error loading activity data:', err);
6159
});
6260
}
6361

6462
// Expand all function
65-
openall(): void {
63+
openAll(): void {
64+
console.log("Expanding all accordions");
6665
this.accordion.forEach(element => {
6766
element.openAll();
6867
});
6968
}
7069

7170
// Close all function
72-
closeall(): void {
71+
closeAll(): void {
7372
this.accordion.forEach(element => {
7473
element.closeAll();
7574
});

‎src/app/model/activity-store.ts‎

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { appendHashElement } from '../util/ArrayHash';
22
import { IgnoreList } from './ignore-list';
33
import { Progress } from './types';
4+
import { MarkdownText } from './markdown-text';
45

56
export type Data = Record<string, Category>;
67
export type Category = Record<string, Dimension>;
@@ -13,22 +14,22 @@ export interface Activity {
1314
dimension: string;
1415
level: number;
1516
name: string;
16-
description: string;
17-
risk: string;
18-
measure: string;
17+
description: MarkdownText;
18+
risk: MarkdownText;
19+
measure: MarkdownText;
1920
tags: string[];
20-
implementationGuide: string;
21+
implementationGuide: MarkdownText;
2122
difficultyOfImplementation: DifficultyOfImplementation;
2223
usefulness: number;
2324
knowledge: number;
2425
resources: number;
2526
time: number;
2627
dependsOn: string[];
27-
comments: string;
28+
comments: MarkdownText;
2829
implementation: Implementation[];
29-
evidence: string;
30+
evidence: MarkdownText;
3031
teamsEvidence: Object;
31-
assessment: string;
32+
assessment: MarkdownText;
3233
references: FrameworkReferences;
3334
isImplemented: boolean;
3435
teamsImplemented: Record<string, any>;
@@ -41,32 +42,6 @@ export interface FrameworkReferences {
4142
openCRE: string[];
4243
}
4344

44-
// export interface activityDescription {
45-
// level: string;
46-
// tags: string[];
47-
// activityName: string;
48-
// uuid: string;
49-
// description: string;
50-
// risk: string;
51-
// measure: string;
52-
// implementationGuide: string;
53-
// iso: string[];
54-
// iso22: string[];
55-
// samm: string[];
56-
// openCRE: string[];
57-
// knowledge: number;
58-
// resources: number;
59-
// time: number;
60-
// dependsOn: string[];
61-
// implementation: Implementation[];
62-
// usefulness: number;
63-
// evidence: string;
64-
// teamsEvidence: Object;
65-
// assessment: string;
66-
// comments: string;
67-
// // isImplemented: boolean;
68-
// // teamsImplemented: Record<string, any>;
69-
// }
7045
export interface Implementation {
7146
name: string;
7247
tags: string[];
@@ -241,6 +216,14 @@ export class ActivityStore {
241216
}
242217
// console.log(` - ${categoryName} -- ${dimName} -- ${activityName}`);
243218

219+
// Initiate markdown strings
220+
activity.description = new MarkdownText(activity.description as unknown as string);
221+
activity.risk = new MarkdownText(activity.risk as unknown as string);
222+
activity.measure = new MarkdownText(activity.measure as unknown as string);
223+
activity.comments = new MarkdownText(activity.comments as unknown as string);
224+
activity.assessment = new MarkdownText(activity.assessment as unknown as string);
225+
activity.evidence = new MarkdownText(activity.evidence as unknown as string);
226+
244227
// Rename properties to match the Activity interface
245228
activity.category = categoryName;
246229
activity.dimension = dimName;

‎src/app/model/markdown-text.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as md from 'markdown-it';
2+
3+
let markdown: md =md();
4+
5+
export class MarkdownText {
6+
private plain: string | undefined;
7+
private md: string | undefined;
8+
9+
constructor(text: string | undefined) {
10+
this.plain = text;
11+
this.md = undefined;
12+
}
13+
14+
empty(): boolean {
15+
return this.plain == undefined || this.plain.trim().length == 0;
16+
}
17+
18+
hasContent(): boolean {
19+
return !this.empty();
20+
}
21+
22+
toString(): string {
23+
return this.plain || '';
24+
}
25+
26+
render(): string {
27+
if (!this.plain) return '';
28+
if (!this.md) this.md = markdown.render(this.plain);
29+
return this.md;
30+
}
31+
}

‎src/app/pages/circular-heatmap/circular-heatmap.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,38 +35,38 @@ <h2>Nothing to show</h2>
3535
</div>
3636
<mat-expansion-panel
3737
[expanded]="true"
38-
*ngIf="showActivityDetails?.description">
38+
*ngIf="showActivityDetails?.description?.hasContent()">
3939
<mat-expansion-panel-header>
4040
<mat-panel-title>
4141
<b>Description</b>
4242
</mat-panel-title>
4343
</mat-expansion-panel-header>
4444
<ng-template matExpansionPanelContent>
45-
<p [innerHTML]="showActivityDetails?.description"></p>
45+
<p [innerHTML]="showActivityDetails?.description?.render()"></p>
4646
</ng-template>
4747
</mat-expansion-panel>
4848
<mat-expansion-panel
4949
[expanded]="true"
50-
*ngIf="showActivityDetails?.risk">
50+
*ngIf="showActivityDetails?.risk?.hasContent()">
5151
<mat-expansion-panel-header>
5252
<mat-panel-title>
5353
<b>Risk</b>
5454
</mat-panel-title>
5555
</mat-expansion-panel-header>
5656
<ng-template matExpansionPanelContent>
57-
<p [innerHTML]="showActivityDetails?.risk"></p>
57+
<p [innerHTML]="showActivityDetails?.risk?.render()"></p>
5858
</ng-template>
5959
</mat-expansion-panel>
6060
<mat-expansion-panel
6161
[expanded]="true"
62-
*ngIf="showActivityDetails?.measure">
62+
*ngIf="showActivityDetails?.measure?.hasContent()">
6363
<mat-expansion-panel-header>
6464
<mat-panel-title>
6565
<b>Measure</b>
6666
</mat-panel-title>
6767
</mat-expansion-panel-header>
6868
<ng-template matExpansionPanelContent>
69-
<p [innerHTML]="showActivityDetails?.measure"></p>
69+
<p [innerHTML]="showActivityDetails?.measure?.render()"></p>
7070
</ng-template>
7171
</mat-expansion-panel>
7272
<mat-expansion-panel

‎src/app/pages/mapping/mapping.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,16 +136,16 @@ export class MappingComponent implements OnInit, AfterViewInit {
136136
samm2: activity?.references?.samm2 || [],
137137
ISO17: activity?.references?.iso27001_2017 || [],
138138
ISO22: activity?.references?.iso27001_2022 || [],
139-
description: activity.description || '',
140-
risk: activity.risk || '',
141-
measure: activity.measure || '',
139+
description: activity.description.toString() || '',
140+
risk: activity.risk.toString() || '',
141+
measure: activity.measure.toString() || '',
142142
knowledge: dataStore.getMetaString('knowledgeLabels', activity.knowledge),
143143
resources: dataStore.getMetaString('labels', activity.resources),
144144
time: dataStore.getMetaString('labels', activity.time),
145145
usefulness: dataStore.getMetaString('labels', activity.usefulness),
146146
dependsOn: activity.dependsOn || [],
147-
comments: activity.comments || '',
148-
assessment: activity.assessment || '',
147+
comments: activity.comments.toString() || '',
148+
assessment: activity.assessment.toString() || '',
149149
level: activity.level || 0,
150150
teamImplementation: activity.implementation || {},
151151
// teamsEvidence: activity.teamsEvidence || {},

‎src/assets/Markdown Files/TODO-central-loader.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@
44
- Teams: Bug: On rename team, in-progress activities must be updated
55

66
## Next
7+
- Use DOMPurify to check markdown in MarkdownText before innerHTML
78

89
## ToDo
910
- Heatmap: Fix: asterisk marks when modified
1011
- ViewController needs to know about changes vs temp storage
1112
- Heatmap: Bug: Clicking on grey sector leaves cursor on that sector
12-
- Heatmap: Run Markdown on yaml text
13-
- Use DOMPurify to check markdown before innerHTML
1413
### Settings
1514
- Make settings page
1615
- Date format (don't rely just on browser language)
@@ -19,7 +18,6 @@
1918
### Dark Mode
2019
- Merge in Dark Mode [PR #381](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/pull/381)
2120
### Matrix
22-
- Matrix: Fix markdown rendering
2321
- Matrix: Add a Close/Back button
2422
### Teama
2523
- Teams: Allow user to re-order teams and groups
@@ -69,6 +67,8 @@
6967
- Meta.yaml: Allow admins to customize the terms 'Team' and 'Group' (e.g. to 'App' and 'Portfolio')
7068

7169
# Done
70+
- Heatmap: Run Markdown on yaml text
71+
- Matrix: Fix markdown rendering
7272
- Teams: Display some core info about the selected team/group
7373
- Teams: Export teams and groups names as yaml
7474
- Teams: Store teams names in localstorage

0 commit comments

Comments
 (0)