Skip to content

Commit 5df8b9f

Browse files
harrim91harrim91
authored
CCM-8125: rework markdown rendering (#558)
1 parent 4ed0a36 commit 5df8b9f

File tree

13 files changed

+616
-248
lines changed

13 files changed

+616
-248
lines changed

‎.editorconfig‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,6 @@ indent_size = 4
2828

2929
[{Makefile,*.mk,go.mod,go.sum,*.go,.gitmodules}]
3030
indent_style = tab
31+
32+
[frontend/src/__tests__/utils/markdownit/fixtures/index.ts]
33+
trim_trailing_whitespace = false

‎frontend/src/__tests__/components/forms/fixtures.ts‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎frontend/src/__tests__/utils/markdownit/__snapshots__/index.test.tsx.snap‎

Lines changed: 228 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,247 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`renderEmailMarkdown should only process email markdown rules 1`] = `
4-
"<h1>Heading</h1>
5-
<h2>sub heading</h2>
6-
<p><strong>bold</strong></p>
3+
exports[`renderEmailMarkdown should render markdown matching GOVUK Notify email rules 1`] = `
4+
"<h1>Linebreaks</h1>
5+
<p>Without 2 trailing spaces:</p>
6+
<p>Line 1<br>
7+
Line 2<br>
8+
Line 3</p>
9+
<p>With 2 trailing spaces:</p>
10+
<p>Line 4<br>
11+
Line 5<br>
12+
Line 6</p>
13+
<h1>Paragraphs</h1>
14+
<p>Paragraph 1</p>
15+
<p>Paragraph 2</p>
16+
<p>Paragraph 3<br>
17+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor vel quam vitae finibus.</p>
18+
<p>Paragraph above two blank lines</p>
19+
<p>Paragraph below two blank lines</p>
20+
<h1>Headings</h1>
21+
<h1>Heading 1</h1>
22+
<h2>Heading 2</h2>
23+
<p>Heading 3</p>
24+
<p>Heading 4</p>
25+
<p>Heading 5</p>
26+
<p>Heading 6</p>
27+
<p>####### Heading 7</p>
28+
<p>## Indented Heading</p>
29+
<h1>Heading no space</h1>
30+
<h1>Hashes at the end of the line get trimmed</h1>
31+
<h2>Heading directly above a paragraph</h2>
32+
<p>Aenean congue venenatis rutrum. Suspendisse vehicula finibus volutpat. Nunc lacinia rhoncus nibh.</p>
33+
<h1>Bold and italics</h1>
34+
<p>**Some bold text using asterisks**</p>
35+
<p>__Some bold text using underscores__</p>
36+
<p>*Some italic text using asterisks*</p>
37+
<p>_Some italic text using underscores_</p>
38+
<h1>Lists</h1>
39+
<p>Bullets with asterisks:</p>
740
<ul>
8-
<li>bullet point 1</li>
9-
<li>bullet point 2</li>
41+
<li>Duis finibus tellus augue, ut dapibus orci vehicula id.</li>
42+
<li>Proin in condimentum tellus, ac elementum ligula.</li>
43+
<li>Nulla libero nisl, hendrerit vel est quis, efficitur dignissim est.</li>
1044
</ul>
45+
<p>Bullets with dashes:</p>
46+
<ul>
47+
<li>Duis finibus tellus augue, ut dapibus orci vehicula id.</li>
48+
<li>Proin in condimentum tellus, ac elementum ligula.</li>
49+
<li>Nulla libero nisl, hendrerit vel est quis, efficitur dignissim est.</li>
50+
</ul>
51+
<p>Bullets without required spaces:</p>
52+
<p>*bullet 1 no space<br>
53+
*bullet 2 no space<br>
54+
*bullet 3 no space</p>
55+
<p>Ordered list:</p>
1156
<ol>
12-
<li>ordered list item 1</li>
13-
<li>ordered list item 2</li>
57+
<li>Praesent rutrum ex vel velit aliquam.</li>
58+
<li>Et viverra turpis vestibulum.</li>
59+
<li>Pellentesque quis nisi accumsan.</li>
1460
</ol>
15-
<p><a href="https://www.nhs.uk/example" target="_blank" rel="noopener noreferrer">Read more</a></p>
16-
<p>https://www.nhs.uk/example</p>
17-
<p>Before page break</p>
61+
<p>Ordered list without required spaces:</p>
62+
<p>1.Step 1 no space<br>
63+
2.Step 2 no space<br>
64+
3.Step 3 no space</p>
65+
<h1>Image</h1>
66+
<p></p>
67+
<h1>Links</h1>
68+
<p><a href="https://en.wikipedia.org/wiki/Markdown" target="_blank" rel="noopener noreferrer">Link text</a></p>
69+
<p>www.nhs.uk</p>
70+
<p>nhs.uk</p>
71+
<p><a href="https://www.nhs.uk" target="_blank" rel="noopener noreferrer">https://www.nhs.uk</a></p>
72+
<p><a href="http://nhs.uk" target="_blank" rel="noopener noreferrer">http://nhs.uk</a></p>
73+
<p>[email protected]</p>
74+
<p>Links with &lt; &gt; symbols:</p>
75+
<p>&lt;www.google.com&gt;</p>
76+
<p>&lt;[email protected]&gt;</p>
77+
<h1>Lines</h1>
78+
<p>Horizontal line using 3 asterisks</p>
1879
<hr>
19-
<p>After page break</p>
20-
<p>Start of line break<br>end of line break</p>
21-
<p>Before horizontal line</p>
80+
<p>Horizontal line using 3 underscores</p>
2281
<hr>
23-
<p>End of horizontal line</p>
24-
<p>This is a paragraph</p>
25-
<p>By doing a new line this starts a new paragraph</p>
82+
<p>Horizontal line with less than 3 doesn't render</p>
83+
<p>__</p>
2684
"
2785
`;
2886
29-
exports[`renderNHSAppMarkdown should only process nhs app markdown rules 1`] = `
30-
"<h1>Heading</h1>
31-
<h2>sub heading</h2>
32-
<p><strong>bold</strong></p>
87+
exports[`renderNHSAppMarkdown should render markdown matching NHSApp email rules 1`] = `
88+
"<h1>Linebreaks</h1>
89+
<p>Without 2 trailing spaces:</p>
90+
<p>Line 1
91+
Line 2
92+
Line 3</p>
93+
<p>With 2 trailing spaces:</p>
94+
<p>Line 4<br>
95+
Line 5<br>
96+
Line 6</p>
97+
<h1>Paragraphs</h1>
98+
<p>Paragraph 1</p>
99+
<p>Paragraph 2</p>
100+
<p>Paragraph 3
101+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor vel quam vitae finibus.</p>
102+
<p>Paragraph above two blank lines</p>
103+
<p>Paragraph below two blank lines</p>
104+
<h1>Headings</h1>
105+
<h1>Heading 1</h1>
106+
<h2>Heading 2</h2>
107+
<h3>Heading 3</h3>
108+
<h4>Heading 4</h4>
109+
<h5>Heading 5</h5>
110+
<h6>Heading 6</h6>
111+
<p>####### Heading 7</p>
112+
<p>## Indented Heading</p>
113+
<p>#Heading no space</p>
114+
<h1>Hashes at the end of the line get trimmed</h1>
115+
<h2>Heading directly above a paragraph</h2>
116+
<p>Aenean congue venenatis rutrum. Suspendisse vehicula finibus volutpat. Nunc lacinia rhoncus nibh.</p>
117+
<h1>Bold and italics</h1>
118+
<p><strong>Some bold text using asterisks</strong></p>
119+
<p><strong>Some bold text using underscores</strong></p>
120+
<p><em>Some italic text using asterisks</em></p>
121+
<p><em>Some italic text using underscores</em></p>
122+
<h1>Lists</h1>
123+
<p>Bullets with asterisks:</p>
124+
<ul>
125+
<li>Duis finibus tellus augue, ut dapibus orci vehicula id.</li>
126+
<li>Proin in condimentum tellus, ac elementum ligula.</li>
127+
<li>Nulla libero nisl, hendrerit vel est quis, efficitur dignissim est.</li>
128+
</ul>
129+
<p>Bullets with dashes:</p>
33130
<ul>
34-
<li>bullet point 1</li>
35-
<li>bullet point 2</li>
131+
<li>Duis finibus tellus augue, ut dapibus orci vehicula id.</li>
132+
<li>Proin in condimentum tellus, ac elementum ligula.</li>
133+
<li>Nulla libero nisl, hendrerit vel est quis, efficitur dignissim est.</li>
36134
</ul>
135+
<p>Bullets without required spaces:</p>
136+
<p>*bullet 1 no space
137+
*bullet 2 no space
138+
*bullet 3 no space</p>
139+
<p>Ordered list:</p>
37140
<ol>
38-
<li>ordered list item 1</li>
39-
<li>ordered list item 2</li>
141+
<li>Praesent rutrum ex vel velit aliquam.</li>
142+
<li>Et viverra turpis vestibulum.</li>
143+
<li>Pellentesque quis nisi accumsan.</li>
40144
</ol>
41-
<p><a href="https://www.nhs.uk/example" target="_blank" rel="noopener noreferrer">Read more</a></p>
42-
<p>https://www.nhs.uk/example</p>
43-
<p>Before page break
44-
***
45-
After page break</p>
46-
<p>Start of line break<br>end of line break</p>
47-
<p>Before horizontal line
48-
---
49-
End of horizontal line</p>
50-
<p>This is a paragraph</p>
51-
<p>By doing a new line this starts a new paragraph</p>
145+
<p>Ordered list without required spaces:</p>
146+
<p>1.Step 1 no space
147+
2.Step 2 no space
148+
3.Step 3 no space</p>
149+
<h1>Image</h1>
150+
<p><img src="https://assets.nhs.uk/images/nhs-logo.png" alt="NHS Logo"></p>
151+
<h1>Links</h1>
152+
<p><a href="https://en.wikipedia.org/wiki/Markdown" target="_blank" rel="noopener noreferrer">Link text</a></p>
153+
<p>www.nhs.uk</p>
154+
<p>nhs.uk</p>
155+
<p>https://www.nhs.uk</p>
156+
<p>http://nhs.uk</p>
157+
<p>[email protected]</p>
158+
<p>Links with &lt; &gt; symbols:</p>
159+
<p>&lt;www.google.com&gt;</p>
160+
<p>&lt;[email protected]&gt;</p>
161+
<h1>Lines</h1>
162+
<p>Horizontal line using 3 asterisks</p>
163+
<p>***</p>
164+
<p>Horizontal line using 3 underscores</p>
165+
<hr>
166+
<p>Horizontal line with less than 3 doesn't render</p>
167+
<p>__</p>
52168
"
53169
`;
54170
55-
exports[`renderSMSMarkdown should only process text message markdown rules 1`] = `
56-
"<p># Heading</p>
57-
<p>## sub heading</p>
58-
<p>**bold**</p>
59-
<p>* bullet point 1
60-
* bullet point 2</p>
61-
<p>1. ordered list item 1
62-
2. ordered list item 2</p>
63-
<p>[Read more](https://www.nhs.uk/example)</p>
64-
<p>https://www.nhs.uk/example</p>
65-
<p>Before page break
66-
***
67-
After page break</p>
68-
<p>Start of line break end of line break</p>
69-
<p>Before horizontal line
70-
---
71-
End of horizontal line</p>
72-
<p>This is a paragraph</p>
73-
<p>By doing a new line this starts a new paragraph</p>
171+
exports[`renderSMSMarkdown should render markdown matching GOVUK Notify SMS rules 1`] = `
172+
"<p># Linebreaks</p>
173+
<p>Without 2 trailing spaces:</p>
174+
<p>Line 1<br>
175+
Line 2<br>
176+
Line 3</p>
177+
<p>With 2 trailing spaces:</p>
178+
<p>Line 4<br>
179+
Line 5<br>
180+
Line 6</p>
181+
<p># Paragraphs</p>
182+
<p>Paragraph 1</p>
183+
<p>Paragraph 2</p>
184+
<p>Paragraph 3<br>
185+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor vel quam vitae finibus.</p>
186+
<p>Paragraph above two blank lines</p>
187+
<p>Paragraph below two blank lines</p>
188+
<p># Headings</p>
189+
<p># Heading 1</p>
190+
<p>## Heading 2</p>
191+
<p>### Heading 3</p>
192+
<p>#### Heading 4</p>
193+
<p>##### Heading 5</p>
194+
<p>###### Heading 6</p>
195+
<p>####### Heading 7</p>
196+
<p>## Indented Heading</p>
197+
<p>#Heading no space</p>
198+
<p># Hashes at the end of the line get trimmed ###</p>
199+
<p>## Heading directly above a paragraph<br>
200+
Aenean congue venenatis rutrum. Suspendisse vehicula finibus volutpat. Nunc lacinia rhoncus nibh.</p>
201+
<p># Bold and italics</p>
202+
<p>**Some bold text using asterisks**</p>
203+
<p>__Some bold text using underscores__</p>
204+
<p>*Some italic text using asterisks*</p>
205+
<p>_Some italic text using underscores_</p>
206+
<p># Lists</p>
207+
<p>Bullets with asterisks:</p>
208+
<p>* Duis finibus tellus augue, ut dapibus orci vehicula id.<br>
209+
* Proin in condimentum tellus, ac elementum ligula.<br>
210+
* Nulla libero nisl, hendrerit vel est quis, efficitur dignissim est.</p>
211+
<p>Bullets with dashes:</p>
212+
<p>- Duis finibus tellus augue, ut dapibus orci vehicula id.<br>
213+
- Proin in condimentum tellus, ac elementum ligula.<br>
214+
- Nulla libero nisl, hendrerit vel est quis, efficitur dignissim est.</p>
215+
<p>Bullets without required spaces:</p>
216+
<p>*bullet 1 no space<br>
217+
*bullet 2 no space<br>
218+
*bullet 3 no space</p>
219+
<p>Ordered list:</p>
220+
<p>1. Praesent rutrum ex vel velit aliquam.<br>
221+
2. Et viverra turpis vestibulum.<br>
222+
3. Pellentesque quis nisi accumsan.</p>
223+
<p>Ordered list without required spaces:</p>
224+
<p>1.Step 1 no space<br>
225+
2.Step 2 no space<br>
226+
3.Step 3 no space</p>
227+
<p># Image</p>
228+
<p>![NHS Logo](<a href="https://assets.nhs.uk/images/nhs-logo.png" target="_blank" rel="noopener noreferrer">https://assets.nhs.uk/images/nhs-logo.png</a>)</p>
229+
<p># Links</p>
230+
<p>[Link text](<a href="https://en.wikipedia.org/wiki/Markdown" target="_blank" rel="noopener noreferrer">https://en.wikipedia.org/wiki/Markdown</a>)</p>
231+
<p><a href="http://www.nhs.uk" target="_blank" rel="noopener noreferrer">www.nhs.uk</a></p>
232+
<p><a href="http://nhs.uk" target="_blank" rel="noopener noreferrer">nhs.uk</a></p>
233+
<p><a href="https://www.nhs.uk" target="_blank" rel="noopener noreferrer">https://www.nhs.uk</a></p>
234+
<p><a href="http://nhs.uk" target="_blank" rel="noopener noreferrer">http://nhs.uk</a></p>
235+
<p>[email protected]</p>
236+
<p>Links with &lt; &gt; symbols:</p>
237+
<p>&lt;<a href="http://www.google.com" target="_blank" rel="noopener noreferrer">www.google.com</a>&gt;</p>
238+
<p>&lt;[email protected]&gt;</p>
239+
<p># Lines</p>
240+
<p>Horizontal line using 3 asterisks</p>
241+
<p>***</p>
242+
<p>Horizontal line using 3 underscores</p>
243+
<p>___</p>
244+
<p>Horizontal line with less than 3 doesn't render</p>
245+
<p>__</p>
74246
"
75-
`;
247+
`;

0 commit comments

Comments
 (0)