[Feature Request] Display a table in diagnostic window of Monaco Editor

[chengtie]

Context

• This issue is not a bug report. (please use a different template for reporting a bug)
• This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

(* I don't know if it is an existing feature or not *)

In this sample of Monaco Editor, when we hover on the Hover over this text, we could see markdown result in the diagnostic window. The contents of the window are provided by the code:

	contents: [
	    { value: '**SOURCE**' },
		{ value: '```html\n' + res.responseText.substring(0, 200) + '\n```' }
	]

I'm wondering if it is possible to draw a table in the diagnostic window.

I tried to add { value: '| a | b | c | d | e | |---|---|---|---|---| | 1 | 2 | 3 | 4 | 5 |'}, it did not work.

Could anyone help?

[rcjsuen]

I tried to add { value: '| a | b | c | d | e | |---|---|---|---|---| | 1 | 2 | 3 | 4 | 5 |'}, it did not work.

@chengtie You can achieve this with raw HTML and specifying supportHtml. You may also be interested in #801.

table, th, td {
  border: 1px solid black;
}

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model) {
        return {
            range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
            contents: [
                {
                    value: "<table><tr><td>abc</td><td>123</td></tr><tr><td>abc</td><td>123</td></tr></table>",
                    supportHtml: true
                },
            ]
        }
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: '\n\nHover over this text',
    language: 'mySpecialLanguage'
});

[chengtie]

@rcjsuen Thank you, that works great!

Additionally, i guess it is impossible to use table solutions like https://github.com/handsontable/handsontable here?

[spahnke]

You can use a template string for that (the line breaks are important for the table rendering).

CSS (augmented from post above):

.monaco .hover-content table, th, td {
    border: 1px solid black;
}

Hover element:

contents: [
    { value: '**SOURCE**' },
    { value: `
| a | b | c | d | e |
|---|---|---|---|---|
| f | g | h | i | j |` 
    }
]

[chengtie]

@spahnke it works, thank you!

Again, i guess it is impossible to use table solutions like https://github.com/handsontable/handsontable here?

[alexdima]

@chengtie It is not possible to render a special table widget inside the hover via the hover provider.