Support markdown styling in task descriptions. (#121338)

* Support markdown styling in task descriptions.
Closes #120050

* Remove extra export

* Fix typo

* Dont use default values in internal-only functions

* Preformatted => Code

* Add tests

Author: Jackson Kearl

src/vs/base/browser/formattedTextRenderer.ts

@@ -16,6 +16,7 @@ export interface FormattedTextRenderOptions {
 	readonly className?: string;
 	readonly inline?: boolean;
 	readonly actionHandler?: IContentActionHandler;
+	readonly renderCodeSegements?: boolean;
 }
 
 export function renderText(text: string, options: FormattedTextRenderOptions = {}): HTMLElement {
@@ -26,7 +27,7 @@ export function renderText(text: string, options: FormattedTextRenderOptions = {
 
 export function renderFormattedText(formattedText: string, options: FormattedTextRenderOptions = {}): HTMLElement {
 	const element = createElement(options);
-	_renderFormattedText(element, parseFormattedText(formattedText), options.actionHandler);
+	_renderFormattedText(element, parseFormattedText(formattedText, !!options.renderCodeSegements), options.actionHandler, options.renderCodeSegements);
 	return element;
 }
 
@@ -75,6 +76,7 @@ const enum FormatType {
 	Italics,
 	Action,
 	ActionClose,
+	Code,
 	NewLine
 }
 
@@ -85,7 +87,7 @@ interface IFormatParseTree {
 	children?: IFormatParseTree[];
 }
 
-function _renderFormattedText(element: Node, treeNode: IFormatParseTree, actionHandler?: IContentActionHandler) {
+function _renderFormattedText(element: Node, treeNode: IFormatParseTree, actionHandler?: IContentActionHandler, renderCodeSegements?: boolean) {
 	let child: Node | undefined;
 
 	if (treeNode.type === FormatType.Text) {
@@ -94,6 +96,8 @@ function _renderFormattedText(element: Node, treeNode: IFormatParseTree, actionH
 		child = document.createElement('b');
 	} else if (treeNode.type === FormatType.Italics) {
 		child = document.createElement('i');
+	} else if (treeNode.type === FormatType.Code && renderCodeSegements) {
+		child = document.createElement('code');
 	} else if (treeNode.type === FormatType.Action && actionHandler) {
 		const a = document.createElement('a');
 		a.href = '#';
@@ -114,12 +118,12 @@ function _renderFormattedText(element: Node, treeNode: IFormatParseTree, actionH
 
 	if (child && Array.isArray(treeNode.children)) {
 		treeNode.children.forEach((nodeChild) => {
-			_renderFormattedText(child!, nodeChild, actionHandler);
+			_renderFormattedText(child!, nodeChild, actionHandler, renderCodeSegements);
 		});
 	}
 }
 
-function parseFormattedText(content: string): IFormatParseTree {
+function parseFormattedText(content: string, parseCodeSegments: boolean): IFormatParseTree {
 
 	const root: IFormatParseTree = {
 		type: FormatType.Root,
@@ -134,19 +138,19 @@ function parseFormattedText(content: string): IFormatParseTree {
 	while (!stream.eos()) {
 		let next = stream.next();
 
-		const isEscapedFormatType = (next === '\\' && formatTagType(stream.peek()) !== FormatType.Invalid);
+		const isEscapedFormatType = (next === '\\' && formatTagType(stream.peek(), parseCodeSegments) !== FormatType.Invalid);
 		if (isEscapedFormatType) {
 			next = stream.next(); // unread the backslash if it escapes a format tag type
 		}
 
-		if (!isEscapedFormatType && isFormatTag(next) && next === stream.peek()) {
+		if (!isEscapedFormatType && isFormatTag(next, parseCodeSegments) && next === stream.peek()) {
 			stream.advance();
 
 			if (current.type === FormatType.Text) {
 				current = stack.pop()!;
 			}
 
-			const type = formatTagType(next);
+			const type = formatTagType(next, parseCodeSegments);
 			if (current.type === type || (current.type === FormatType.Action && type === FormatType.ActionClose)) {
 				current = stack.pop()!;
 			} else {
@@ -200,11 +204,11 @@ function parseFormattedText(content: string): IFormatParseTree {
 	return root;
 }
 
-function isFormatTag(char: string): boolean {
-	return formatTagType(char) !== FormatType.Invalid;
+function isFormatTag(char: string, supportCodeSegments: boolean): boolean {
+	return formatTagType(char, supportCodeSegments) !== FormatType.Invalid;
 }
 
-function formatTagType(char: string): FormatType {
+function formatTagType(char: string, supportCodeSegments: boolean): FormatType {
 	switch (char) {
 		case '*':
 			return FormatType.Bold;
@@ -214,6 +218,8 @@ function formatTagType(char: string): FormatType {
 			return FormatType.Action;
 		case ']':
 			return FormatType.ActionClose;
+		case '`':
+			return supportCodeSegments ? FormatType.Code : FormatType.Invalid;
 		default:
 			return FormatType.Invalid;
 	}

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

@@ -44,8 +44,14 @@ suite('FormattedTextRenderer', () => {
 		result = renderFormattedText('__italics__');
 		assert.strictEqual(result.innerHTML, '<i>italics</i>');
 
-		result = renderFormattedText('this string has **bold** and __italics__');
-		assert.strictEqual(result.innerHTML, 'this string has <b>bold</b> and <i>italics</i>');
+		result = renderFormattedText('``code``');
+		assert.strictEqual(result.innerHTML, '``code``');
+
+		result = renderFormattedText('``code``', { renderCodeSegements: true });
+		assert.strictEqual(result.innerHTML, '<code>code</code>');
+
+		result = renderFormattedText('this string has **bold**, __italics__, and ``code``!!', { renderCodeSegements: true });
+		assert.strictEqual(result.innerHTML, 'this string has <b>bold</b>, <i>italics</i>, and <code>code</code>!!');
 	});
 
 	test('no formatting', () => {
@@ -96,6 +102,26 @@ suite('FormattedTextRenderer', () => {
 		assert.strictEqual(callbackCalled, true);
 	});
 
+	test('fancier action', () => {
+		let callbackCalled = false;
+		let result: HTMLElement = renderFormattedText('``__**[[action]]**__``', {
+			renderCodeSegements: true,
+			actionHandler: {
+				callback(content) {
+					assert.strictEqual(content, '0');
+					callbackCalled = true;
+				},
+				disposeables: store
+			}
+		});
+		assert.strictEqual(result.innerHTML, '<code><i><b><a href="#">action</a></b></i></code>');
+
+		let event: MouseEvent = <any>document.createEvent('MouseEvent');
+		event.initEvent('click', true, true);
+		result.firstChild!.firstChild!.firstChild!.firstChild!.dispatchEvent(event);
+		assert.strictEqual(callbackCalled, true);
+	});
+
 	test('escaped formatting', () => {
 		let result: HTMLElement = renderFormattedText('\\*\\*bold\\*\\*');
 		assert.strictEqual(result.children.length, 0);

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.contribution.ts

@@ -235,7 +235,7 @@ ExtensionsRegistry.registerExtensionPoint({
 							},
 							description: {
 								type: 'string',
-								description: localize('walkthroughs.tasks.description', "Description of task. Use markdown-style links fo commands or external links: [Title](command:myext.command), [Title](command:toSide:myext.command), or [Title](https://aka.ms)")
+								description: localize('walkthroughs.tasks.description', "Description of task. Supports ``preformatted``, __italic__, and **bold** text. Use markdown-style links for commands or external links: [Title](command:myext.command), [Title](command:toSide:myext.command), or [Title](https://aka.ms). Links on their own line will be rendered as buttons.")
 							},
 							button: {
 								deprecationMessage: localize('walkthroughs.tasks.button.deprecated', "Deprecated. Use markdown links in the description instead, i.e. [Title](command:myext.command), [Title](command:toSide:myext.command), or [Title](https://aka.ms), "),

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts

@@ -45,6 +45,7 @@ import { LinkedText } from 'vs/base/common/linkedText';
 import { Button } from 'vs/base/browser/ui/button/button';
 import { attachButtonStyler, attachLinkStyler } from 'vs/platform/theme/common/styler';
 import { Link } from 'vs/platform/opener/browser/link';
+import { renderFormattedText } from 'vs/base/browser/formattedTextRenderer';
 
 const SLIDE_TRANSITION_TIME_MS = 250;
 const configurationKey = 'workbench.startupEditor';
@@ -761,7 +762,7 @@ export class GettingStartedPage extends EditorPane {
 					const p = append(container, $('p'));
 					for (const node of linkedText.nodes) {
 						if (typeof node === 'string') {
-							append(p, document.createTextNode(node));
+							append(p, renderFormattedText(node, { inline: true, renderCodeSegements: true }));
 						} else {
 							const link = this.instantiationService.createInstance(Link, node);