diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index 387c68a4955543ee97f6bd7223d6f52fd69dca1e..9e8817373549b4fbad944c5e16aa6ac34f545520 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -115,15 +115,23 @@ display: none; } -.settings-editor.search-mode > .settings-body .settings-tree-container .monaco-tree-wrapper, +.settings-editor.search-mode > .settings-body .settings-tree-container .monaco-tree-wrapper { + width: calc(100% - 11px); + margin-left: 0px; +} + .settings-editor.search-mode > .settings-body > .settings-tree-container .setting-measure-container { + width: calc(100% - 33px); + margin-left: 0px; +} + +.settings-editor.narrow > .settings-body .settings-tree-container .monaco-tree-wrapper { width: calc(100% - 11px); margin-left: 0px; } -.settings-editor.narrow > .settings-body .settings-tree-container .monaco-tree-wrapper, .settings-editor.narrow > .settings-body > .settings-tree-container .setting-measure-container { - width: calc(100% - 11px); + width: calc(100% - 33px); margin-left: 0px; } diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index 6e8eab033c955c8855bd21241ae5312e2c1c7363..ffdb1d511ba1c226e6c9277fb8643db91bca61a5 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -470,20 +470,35 @@ export class SettingsRenderer implements ITreeRenderer { this.descriptionMeasureContainer.classList.remove(boolMeasureClass); } - // Remove markdown links, setting links, backticks - const measureText = element.setting.descriptionIsMarkdown ? - fixSettingLinks(element.description) - .replace(/\[(.*)\]\(.*\)/g, '$1') - .replace(/`([^`]*)`/g, '$1') : - element.description; - - this.descriptionMeasureContainer.innerText = measureText; - const h = this.descriptionMeasureContainer.offsetHeight; - if (h < 20 && measureText.length > this.longestSingleLineDescription) { - this.longestSingleLineDescription = measureText.length; + const shouldRenderMarkdown = element.setting.descriptionIsMarkdown && element.description.indexOf('\n- ') >= 0; + + while (this.descriptionMeasureContainer.firstChild) { + this.descriptionMeasureContainer.removeChild(this.descriptionMeasureContainer.firstChild); } - return h; + if (shouldRenderMarkdown) { + const text = fixSettingLinks(element.description); + const rendered = renderMarkdown({ value: text }); + rendered.classList.add('setting-item-description-markdown'); + this.descriptionMeasureContainer.appendChild(rendered); + + return this.descriptionMeasureContainer.offsetHeight; + } else { + // Remove markdown links, setting links, backticks + const measureText = element.setting.descriptionIsMarkdown ? + fixSettingLinks(element.description) + .replace(/\[(.*)\]\(.*\)/g, '$1') + .replace(/`([^`]*)`/g, '$1') : + element.description; + + this.descriptionMeasureContainer.innerText = measureText; + const h = this.descriptionMeasureContainer.offsetHeight; + if (h < 20 && measureText.length > this.longestSingleLineDescription) { + this.longestSingleLineDescription = measureText.length; + } + + return h; + } } getTemplateId(tree: ITree, element: SettingsTreeElement): string {