Monaco Editor (TypeScript): Decorate JSDoc or TSDoc with further buttons/links/actions

698 Views Asked by At

I'm using Microsoft Monaco Editor for TypeScript language. The TypeScript classes and functions have JSDoc. I'd like to add buttons/links/etc. to the existing JSDoc in order to invoke a JavaScript function when the user clicks on them in the code completion.

It seems that I cannot simply put HTML with JavaScript into the existing JSDoc. Is it possible to attach any buttons to the JSDoc displayed by the code completion, belatedly? I want to add them to the already existing JSDoc.

https://microsoft.github.io/monaco-editor/playground.html

const editor = monaco.editor.create(document.getElementById("container"), {
    value: "/** This is the basic JSDoc <span onclick='alert()'>my button</span>*/" +
           "function hello(param: number): string {\n\talert('Hello world!');\nreturn '';\n}",
    language: "typescript"
});

monaco.languages.registerCompletionItemProvider('javascript', {
    resolveCompletionItem: function(item, token) {
        alert(item);
    }
});
2

There are 2 best solutions below

0
On

While I agree with the original answer saying that this isn't possible because the API will never render HTML, you could still go a long way decorating with plain Markdown. And intercepting undesirable API behaviors is pretty much the whole reason why the Proxy object exists.

2
On

This is not possible. The API for completion items only accepts markdown text (or plain text), not HTML.