Ensure that the first line of markdown in a 'supportHtml' MarkdownString is parsed as markdown (microsoft#217641)

roblourens · web-flow · commit 6f3598b9a169 · 2024-06-25T06:18:41.000+02:00
* Ensure that the first line of markdown in a 'supportHtml' MarkdownString is parsed as markdown Fix microsoft/vscode-copilot-release#1337 * Update tests
diff --git a/src/vs/workbench/contrib/chat/browser/chatMarkdownRenderer.ts b/src/vs/workbench/contrib/chat/browser/chatMarkdownRenderer.ts
@@ -73,7 +73,8 @@ export class ChatMarkdownRenderer extends MarkdownRenderer {
 				...markdown,
 
 				// dompurify uses DOMParser, which strips leading comments. Wrapping it all in 'body' prevents this.
-				value: `<body>${markdown.value}</body>`,
+				// The \n\n prevents marked.js from parsing the body contents as just text in an 'html' token, instead of actual markdown.
+				value: `<body>\n\n${markdown.value}</body>`,
 			}
 			: markdown;
 		return super.render(mdWithBody, options, markedOptions);
diff --git a/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_invalid_HTML.0.snap b/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_invalid_HTML.0.snap
@@ -1 +1 @@
-<div class="rendered-markdown">1&lt;canvas&gt;2&lt;details&gt;3&lt;/details&gt;&lt;/canvas&gt;4</div>
+<div class="rendered-markdown"><p>1&lt;canvas&gt;2&lt;/canvas&gt;</p>&lt;details&gt;3&lt;/details&gt;4<p></p></div>
diff --git a/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_invalid_HTML_with_attributes.0.snap b/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_invalid_HTML_with_attributes.0.snap
@@ -1 +1 @@
-<div class="rendered-markdown">1&lt;details id="id1" style="display: none"&gt;2&lt;details id="my id 2"&gt;3&lt;/details&gt;&lt;/details&gt;4</div>
+<div class="rendered-markdown"><p>1</p>&lt;details id="id1" style="display: none"&gt;2&lt;details id="my id 2"&gt;3&lt;/details&gt;&lt;/details&gt;4<p></p></div>
diff --git a/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_remote_images.0.snap b/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_remote_images.0.snap
@@ -1 +1 @@
-<div class="rendered-markdown"><img src="http://allowed.com/image.jpg"> <div>&lt;img src="http://disallowed.com/image.jpg"&gt;</div></div>
+<div class="rendered-markdown"><p><img src="http://allowed.com/image.jpg"> </p><div>&lt;img src="http://disallowed.com/image.jpg"&gt;</div><p></p></div>
diff --git a/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_self-closing_elements.0.snap b/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_self-closing_elements.0.snap
@@ -1 +1 @@
-<div class="rendered-markdown">&lt;area&gt;<hr><br>&lt;input type="text" value="test"&gt;</div>
+<div class="rendered-markdown"><p>&lt;area&gt;</p><hr><br>&lt;input type="text" value="test"&gt;<p></p></div>
diff --git a/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_supportHtml_with_one-line_markdown.0.snap b/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_supportHtml_with_one-line_markdown.0.snap
@@ -0,0 +1 @@
+<div class="rendered-markdown"><p><strong>hello</strong></p></div>
diff --git a/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_supportHtml_with_one-line_markdown.1.snap b/src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_supportHtml_with_one-line_markdown.1.snap
@@ -0,0 +1,4 @@
+<div class="rendered-markdown"><ol>
+<li><a data-href="https://example.com" href="" title="https://example.com" draggable="false"><em>hello</em></a> test <strong>text</strong></li>
+</ol>
+</div>
diff --git a/src/vs/workbench/contrib/chat/test/browser/chatMarkdownRenderer.test.ts b/src/vs/workbench/contrib/chat/test/browser/chatMarkdownRenderer.test.ts
@@ -27,6 +27,18 @@ suite('ChatMarkdownRenderer', () => {
 		await assertSnapshot(result.element.textContent);
 	});
 
+	test('supportHtml with one-line markdown', async () => {
+		const md = new MarkdownString('**hello**');
+		md.supportHtml = true;
+		const result = store.add(testRenderer.render(md));
+		await assertSnapshot(result.element.outerHTML);
+
+		const md2 = new MarkdownString('1. [_hello_](https://example.com) test **text**');
+		md2.supportHtml = true;
+		const result2 = store.add(testRenderer.render(md2));
+		await assertSnapshot(result2.element.outerHTML);
+	});
+
 	test('invalid HTML', async () => {
 		const md = new MarkdownString('1<canvas>2<details>3</details></canvas>4');
 		md.supportHtml = true;

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,8 @@ export class ChatMarkdownRenderer extends MarkdownRenderer {`
`73`	`73`	`...markdown,`
`74`	`74`
`75`	`75`	`// dompurify uses DOMParser, which strips leading comments. Wrapping it all in 'body' prevents this.`
`76`		- value: `<body>${markdown.value}</body>`,
	`76`	`+ // The \n\n prevents marked.js from parsing the body contents as just text in an 'html' token, instead of actual markdown.`
	`77`	+ value: `<body>\n\n${markdown.value}</body>`,
`77`	`78`	`}`
`78`	`79`	`: markdown;`
`79`	`80`	`return super.render(mdWithBody, options, markedOptions);`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<div class="rendered-markdown">1<canvas>2<details>3</details></canvas>4</div>`
	`1`	`+<div class="rendered-markdown"><p>1<canvas>2</canvas></p><details>3</details>4<p></p></div>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<div class="rendered-markdown">1<details id="id1" style="display: none">2<details id="my id 2">3</details></details>4</div>`
	`1`	`+<div class="rendered-markdown"><p>1</p><details id="id1" style="display: none">2<details id="my id 2">3</details></details>4<p></p></div>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<div class="rendered-markdown"><img src="http://allowed.com/image.jpg"> <div><img src="http://disallowed.com/image.jpg"></div></div>`
	`1`	`+<div class="rendered-markdown"><p><img src="http://allowed.com/image.jpg"> </p><div><img src="http://disallowed.com/image.jpg"></div><p></p></div>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<div class="rendered-markdown"><area><hr><br><input type="text" value="test"></div>`
	`1`	`+<div class="rendered-markdown"><p><area></p><hr><br><input type="text" value="test"><p></p></div>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div class="rendered-markdown"><p><strong>hello</strong></p></div>`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +<div class="rendered-markdown"><ol>
 +<li><a data-href="https://example.com" href="" title="https://example.com" draggable="false"><em>hello</em></a> test <strong>text</strong></li>
 +</ol>
 +</div>