Markdown - add support for "border-radius"

src/vs/base/browser/markdownRenderer.ts

@@ -46,10 +46,9 @@ export interface ISanitizerOptions {
 
 const defaultMarkedRenderers = Object.freeze({
 	image: ({ href, title, text }: marked.Tokens.Image): string => {
-		let dimensions: string[] = [];
 		let attributes: string[] = [];
 		if (href) {
-			({ href, dimensions } = parseHrefAndDimensions(href));
+			({ href, attributes } = parseHrefAndDimensions(href));
 			attributes.push(`src="${escapeDoubleQuotes(href)}"`);
 		}
 		if (text) {
@@ -58,8 +57,8 @@ const defaultMarkedRenderers = Object.freeze({
 		if (title) {
 			attributes.push(`title="${escapeDoubleQuotes(title)}"`);
 		}
-		if (dimensions.length) {
-			attributes = attributes.concat(dimensions);
+		if (attributes.length) {
+			attributes = attributes.concat(attributes);
 		}
 		return '<img ' + attributes.join(' ') + '>';
 	},
@@ -417,6 +416,12 @@ function sanitizeRenderedMarkdown(
 					return;
 				}
 			}
+			if (element.tagName === 'IMG') {
+				if (e.attrName === 'style') {
+					e.keepAttr = /^(border-radius:[0-9]+px;)?$/.test(e.attrValue);
+					return;
+				}
+			}
 			e.keepAttr = false;
 			return;
 		} else if (element.tagName === 'INPUT' && element.attributes.getNamedItem('type')?.value === 'checkbox') {

src/vs/base/common/htmlContent.ts

@@ -168,24 +168,30 @@ export function removeMarkdownEscapes(text: string): string {
 	return text.replace(/\\([\\`*_{}[\]()#+\-.!~])/g, '$1');
 }
 
-export function parseHrefAndDimensions(href: string): { href: string; dimensions: string[] } {
-	const dimensions: string[] = [];
+export function parseHrefAndDimensions(href: string): { href: string; attributes: string[] } {
+	const attributes: string[] = [];
 	const splitted = href.split('|').map(s => s.trim());
 	href = splitted[0];
 	const parameters = splitted[1];
 	if (parameters) {
 		const heightFromParams = /height=(\d+)/.exec(parameters);
 		const widthFromParams = /width=(\d+)/.exec(parameters);
+		const radiusFromParams = /border-radius=(\d+)/.exec(parameters);
 		const height = heightFromParams ? heightFromParams[1] : '';
 		const width = widthFromParams ? widthFromParams[1] : '';
+		const radius = radiusFromParams ? radiusFromParams[1] : '';
 		const widthIsFinite = isFinite(parseInt(width));
 		const heightIsFinite = isFinite(parseInt(height));
+		const radiusIsFinite = isFinite(parseInt(radius));
 		if (widthIsFinite) {
-			dimensions.push(`width="${width}"`);
+			attributes.push(`width="${width}"`);
 		}
 		if (heightIsFinite) {
-			dimensions.push(`height="${height}"`);
+			attributes.push(`height="${height}"`);
+		}
+		if (radiusIsFinite) {
+			attributes.push(`style="border-radius:${radius}px;"`);
 		}
 	}
-	return { href, dimensions };
+	return { href, attributes };
 }

src/vs/base/test/browser/markdownRenderer.test.ts

@@ -63,6 +63,11 @@ suite('MarkdownRenderer', () => {
 			assertNodeEquals(result, `<div><p><img height="200" width="100" title="caption" alt="image" src="http://example.com/cat.gif"></p></div>`);
 		});
 
+		test('image width, height and border-radius from title params', () => {
+			const result: HTMLElement = store.add(renderMarkdown({ value: `![image](http://example.com/cat.gif|height=200,width=100,border-radius=10 'caption')` })).element;
+			assertNodeEquals(result, `<div><p><img height="200" width="100" style="border-radius:10px;" title="caption" alt="image" src="http://example.com/cat.gif"></p></div>`);
+		});
+
 		test('image with file uri should render as same origin uri', () => {
 			if (isWeb) {
 				return;