Allow CompletionItem#documention to be also a MarkdownString, #11877

Update internal api, update rendering of suggestion details, tweak shared renderer
microsoft · Sep 8, 2017 · 098f7fa · 098f7fa
1 parent 48bc6f1
commit 098f7fa
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 8 deletions.
diff --git a/src/vs/editor/common/modes.ts b/src/vs/editor/common/modes.ts
@@ -226,7 +226,7 @@ export interface ISuggestion {
 	insertText: string;
 	type: SuggestionType;
 	detail?: string;
-	documentation?: string;
+	documentation?: string | IMarkdownString;
 	filterText?: string;
 	sortText?: string;
 	noAutoAccept?: boolean;

diff --git a/src/vs/editor/contrib/markdown/browser/markdownRenderer.ts b/src/vs/editor/contrib/markdown/browser/markdownRenderer.ts
@@ -39,12 +39,17 @@ export class MarkdownRenderer {
 
 				return this._modeService.getOrCreateMode(modeId).then(_ => {
 					return tokenizeToString(value, modeId);
+				}).then(code => {
+					return `<span style="font-family: ${editor.getConfiguration().fontInfo.fontFamily}">${code}</span>`;
 				});
 			}
 		};
 	}
 
 	render(markdown: IMarkdownString, options?: RenderOptions): HTMLElement {
+		if (!markdown) {
+			return document.createElement('span');
+		}
 		if (options) {
 			return renderMarkdown(markdown, { ...options, ...this._options });
 		} else {

diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts
@@ -30,6 +30,9 @@ import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService, ITheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { registerColor, editorWidgetBackground, listFocusBackground, activeContrastBorder, listHighlightForeground, editorForeground, editorWidgetBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
+import { MarkdownRenderer } from 'vs/editor/contrib/markdown/browser/markdownRenderer';
+import { IModeService } from 'vs/editor/common/services/modeService';
+import { IOpenerService } from 'vs/platform/opener/common/opener';
 
 const sticky = false; // for development purposes
 const expandSuggestionDocsByDefault = false;
@@ -142,7 +145,7 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
 		data.colorspan.style.backgroundColor = '';
 
 		if (suggestion.type === 'color') {
-			let color = matchesColor(suggestion.label) || matchesColor(suggestion.documentation);
+			let color = matchesColor(suggestion.label) || typeof suggestion.documentation === 'string' && matchesColor(suggestion.documentation);
 			if (color) {
 				data.icon.className = 'icon customcolor';
 				data.colorspan.style.backgroundColor = color;
@@ -203,6 +206,7 @@ class SuggestionDetails {
 		container: HTMLElement,
 		private widget: SuggestWidget,
 		private editor: ICodeEditor,
+		private markdownRenderer: MarkdownRenderer,
 		private triggerKeybindingLabel: string
 	) {
 		this.disposables = [];
@@ -244,7 +248,11 @@ class SuggestionDetails {
 			return;
 		}
 		removeClass(this.el, 'no-docs');
-		this.docs.textContent = item.suggestion.documentation;
+		if (typeof item.suggestion.documentation === 'string') {
+			this.docs.textContent = item.suggestion.documentation;
+		} else {
+			this.docs.innerHTML = this.markdownRenderer.render(item.suggestion.documentation).innerHTML;
+		}
 
 		if (item.suggestion.detail) {
 			this.type.innerText = item.suggestion.detail;
@@ -382,10 +390,13 @@ export class SuggestWidget implements IContentWidget, IDelegate<ICompletionItem>
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IThemeService themeService: IThemeService,
 		@IStorageService storageService: IStorageService,
-		@IKeybindingService keybindingService: IKeybindingService
+		@IKeybindingService keybindingService: IKeybindingService,
+		@IModeService modeService: IModeService,
+		@IOpenerService openerService: IOpenerService
 	) {
 		const kb = keybindingService.lookupKeybinding('editor.action.triggerSuggest');
 		const triggerKeybindingLabel = !kb ? '' : ` (${kb.getLabel()})`;
+		const markdownRenderer = new MarkdownRenderer(editor, modeService, openerService);
 
 		this.isAuto = false;
 		this.focusedItem = null;
@@ -405,7 +416,7 @@ export class SuggestWidget implements IContentWidget, IDelegate<ICompletionItem>
 
 		this.messageElement = append(this.element, $('.message'));
 		this.listElement = append(this.element, $('.tree'));
-		this.details = new SuggestionDetails(this.element, this, this.editor, triggerKeybindingLabel);
+		this.details = new SuggestionDetails(this.element, this, this.editor, markdownRenderer, triggerKeybindingLabel);
 
 		let renderer = new Renderer(this, this.editor, triggerKeybindingLabel);
 

diff --git a/src/vs/vscode.d.ts b/src/vs/vscode.d.ts
@@ -2613,7 +2613,7 @@ declare module 'vscode' {
 		/**
 		 * A human-readable string that represents a doc-comment.
 		 */
-		documentation?: string;
+		documentation?: string | MarkdownString;
 
 		/**
 		 * A string that should be used when comparing this item

diff --git a/src/vs/workbench/api/node/extHostTypeConverters.ts b/src/vs/workbench/api/node/extHostTypeConverters.ts
@@ -354,7 +354,7 @@ export namespace Suggest {
 		result.insertText = suggestion.insertText;
 		result.kind = CompletionItemKind.to(suggestion.type);
 		result.detail = suggestion.detail;
-		result.documentation = suggestion.documentation;
+		result.documentation = typeof suggestion.documentation === 'string' ? suggestion.documentation : MarkdownString.to(suggestion.documentation);
 		result.sortText = suggestion.sortText;
 		result.filterText = suggestion.filterText;
 

diff --git a/src/vs/workbench/api/node/extHostTypes.ts b/src/vs/workbench/api/node/extHostTypes.ts
@@ -892,7 +892,7 @@ export class CompletionItem {
 	label: string;
 	kind: CompletionItemKind;
 	detail: string;
-	documentation: string;
+	documentation: string | vscode.MarkdownString;
 	sortText: string;
 	filterText: string;
 	insertText: string | SnippetString;