microsoft
Allow HTML in documentation of CompletionItem
Feature Request
The documentation parameter of a CompletionItem can only be a string, or a IMarkdownString.
It seems simple strings are escaped, and HTML tags are removed from the value of IMarkdownString.
I suggest an extra parameter in CompletionItem called documentationIsSafe, where if truthy the documentation is not escaped, or a new IHTMLString documentation type.
Similarly, addExtraLib should also allow inline documentation of a typescript definition file to include HTML, and render it as such.
I know it's late but after spending hours digging into the playground and the Chrome Inspector, below is a trick to "enable" the HTML support for the details widget, and of course you can do the same with the items in the list, just a trick so it's not "official" and need to check.
/// Trigger to editor suggestion widget
const suggestionWidget = Editor.Editor.getContribution('editor.contrib.suggestController')?.widget;
/// If found
if (suggestionWidget != null) {
/// Show event
suggestionWidget.value.onDidShow(() => {
/// Replace details widget content changes event
suggestionWidget.value._details.widget.onDidChangeContents((e) => {
/// Parent header node
var domNode = $(".suggest-details").find(".monaco-scrollable-element .body .header");
/// Details node
var oldDetailsDOMNode = domNode.find(".type");
/// HTML details string
var htmlDetailsString = e._type.innerHTML;
/// Recover HTML tags
htmlDetailsString = htmlDetailsString.replace("<", "<").replace(">", ">");
/// Replace html to details node
detailsDOMNode.html(htmlDetailsString);
});
});
/// Hide event
suggestionWidget.value.onDidHide(() => {
});
}
As you can see, this trick directly finds and changes your DOM, without affects the core of monaco-editor. Just temporary trick and we really really need to have an official version of this one
.
In addition, below is the struct of HTML DOM of the details widget i printed. You can read it also and of course you can modify everything here just do similar to the code i have given.
<div class="suggest-details" tabindex="-1" style="font-size: 14px; line-height: 1.35714; font-weight: normal; font-feature-settings: "liga" 0, "calt" 0; user-select: text; width: 428px; height: 38px;">
<div class="monaco-scrollable-element " role="presentation" style="position: relative; overflow: hidden;">
<div class="body" style="overflow: hidden;">
<div class="header"><span class="codicon codicon-close" title="Close"
style="height: 19px; width: 19px;"></span><span class="type auto-wrap"
title="<b>HTML Detail here</b>" style="font-family: Tahoma;">(global) function Test(k: any, v: any):
any</span></div>
<p class="docs">Some description</p>
</div>
<div role="presentation" aria-hidden="true" class="invisible scrollbar horizontal"
style="position: absolute; width: 416px; height: 10px; left: 0px; bottom: 0px;">
<div class="slider"
style="position: absolute; top: 0px; left: 0px; height: 10px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 416px;">
</div>
</div>
<div role="presentation" aria-hidden="true" class="invisible scrollbar vertical"
style="position: absolute; width: 10px; height: 36px; right: 0px; top: 0px;">
<div class="slider"
style="position: absolute; top: 0px; left: 0px; width: 10px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 27px;">
</div>
</div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>
</div>
Edit: Don't try to remove the elements such as p tag and add the new one, just replace their innerHTML only. If you do replace it, you can see the size of the widget (which was calculated by the core of monaco-editor) will not be updated. BTW, inside the onDidChangeContents, the given parameter will give you all the details i have found, and i think it will be better to dig deeper and deeper. We have many fun things to do with this trick before the official version is released.
I see VS Code's details widget had also been modified, which is not presented in the documentations or playground. I guess how to do it, or there is any official solution which has not yet been published??