HTML support in hover (inline HTML in IMarkdownString) #3760

ryanlin1986 · 2018-04-05T21:31:36Z

ryanlin1986
Apr 5, 2018

monaco-editor version: latest
Browser:chrome
OS: win10
Steps or JS usage snippet reproducing the issue:
I want my completion item documentation or hover documentation have inline html.
For example, signature should be colorized, such as:

Here is what I've tried:

As the above image shows, the inline html is santinized,.

rcjsuen · 2018-04-05T21:40:04Z

rcjsuen
Apr 5, 2018

@ryanlin1986 I also opened a separate #802 to describe the problem where the hover behaviour doesn't match VS Code's.

0 replies

mofux · 2018-04-05T23:16:08Z

mofux
Apr 5, 2018

Not sure if it's related, but this feature seems to be broken in general since 0.11.x. One good example is if you go to https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin, switch to the CSS tab and hover over one of the rules. The content of the tooltip used to be colorised in previous versions, now it's printed as plain text with strange tick marks around them:

This might be related to the changes noted in #780, not sure.

0 replies

ryanlin1986 · 2018-04-06T00:23:19Z

ryanlin1986
Apr 6, 2018
Author

@rcjsuen thanks for the help;)

0 replies

rcjsuen · 2018-04-06T07:57:14Z

rcjsuen
Apr 6, 2018

@mofux That's a bug with monaco-css. I've opened #805 as that's a different problem.

0 replies

nikita-fuchs · 2019-08-03T13:09:26Z

nikita-fuchs
Aug 3, 2019

@ryanlin1986 do you happen to have that code example which you used in describing the issue? I have a problem displaying the hover message, as it cannot find IMarkdownString for some reason, although it's clearly exported.

0 replies

dehoward · 2021-10-11T18:55:10Z

dehoward
Oct 11, 2021

@alexdima any update on this bug?

we're trying to show a <button> tag on hover to run a callback. if you have an idea on how to do this using the current implementation I'd love to hear it.

I think we could settle for having a link that opens in the same tab but the current IMarkdownString pattern doesn't seem to support this either (just opening links in new tabs).

0 replies

alexdima · 2021-10-12T05:54:00Z

alexdima
Oct 12, 2021
Maintainer

@dehoward I am not really familiar with the IMarkdownString. But I did notice that IMarkdownString.supportHtml was added recently via microsoft/vscode@8b7264a which hints that HTML elements or a subset of HTML elements would be allowed. cc @mjbvz for any extra info.

0 replies

rcjsuen · 2021-10-12T10:37:59Z

rcjsuen
Oct 12, 2021

I think we could settle for having a link that opens in the same tab but the current IMarkdownString pattern doesn't seem to support this either (just opening links in new tabs).

I did some experimenting and was able to achieve this via commands inside the IMarkdownString. I couldn't get this to work in the Monaco Editor Playground but maybe it's because it's inside of an iframe?

declare var monaco: any

// create the Monaco editor
const editor = monaco.editor.create(document.getElementById("container")!, {
    language: "plaintext",
    value: "hover here"
});

const cmdId = editor.addCommand(0, () => {
    window.location.href = "https://github.com/microsoft/monaco-editor/";
}, "")

monaco.languages.registerHoverProvider("plaintext", {
    provideHover() {
        return {
            contents: [
                {
                    value: `[Run Command](command:${cmdId})`,
                    isTrusted: true
                },
            ]
        }
    }
});

0 replies

rcjsuen · 2021-10-12T12:21:06Z

rcjsuen
Oct 12, 2021

@dehoward I figured out a workaround for the iframe problem so you can try out the code below in the Monaco Editor Playground.

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

const editor = monaco.editor.create(document.getElementById("container"), {
	value: 'Hover over this text',
	language: 'testLanguage'
});

const cmdId = editor.addCommand(0, () => {
    if (window.self !== window.top) {
        window.parent.location.href = "https://github.com/microsoft/monaco-editor/";;
    } else {
        window.location.href = "https://github.com/microsoft/monaco-editor/";;
    }
})

monaco.languages.registerHoverProvider('testLanguage', {
	provideHover: (model) => {
        return {
            range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
            contents: [
                { value: `[Run Command](command:${cmdId})`, isTrusted: true }
                
            ]
        };
	}
});

1 reply

chen-xiaoxing May 22, 2024

hi,@rcjsuen,Do you know how to introduce this hover function on demand? Thank you so much

dehoward · 2021-10-12T19:49:26Z

dehoward
Oct 12, 2021

@dehoward I am not really familiar with the IMarkdownString. But I did notice that IMarkdownString.supportHtml was added recently via microsoft/vscode@8b7264a which hints that HTML elements or a subset of HTML elements would be allowed. cc @mjbvz for any extra info.

@alexdima Thanks, IMarkdownString.supportHTML seems to be what I'm looking for but I haven't been able to get it working in the playground with the below sample:

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

monaco.languages.registerHoverProvider('mySpecialLanguage', {
	provideHover: function (model, position) {
        return {
            range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
            contents: [
                { value: "<a href='https://microsoft.com'>Link!</a>" },
            ],
            supportHtml: true,
            isTrusted: true
        }
	}
});

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

@dehoward I figured out a workaround for the iframe problem so you can try out the code below in the Monaco Editor Playground.

@rcjsuen Nice, I think I'll settle for this solution if I'm not able to get supportHtml working. Thanks for suggesting!

0 replies

rcjsuen · 2021-10-12T20:58:19Z

rcjsuen
Oct 12, 2021

@alexdima Thanks, IMarkdownString.supportHTML seems to be what I'm looking for but I haven't been able to get it working in the playground with the below sample:

@dehoward Your code is a little off because your supportHtml and isTrusted is in the wrong place. Unfortunately, putting it in the right place seems doesn't seem to help outside of actually rendering it as a hyperlink. May or may not be because of the playground being embedded...?

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: "<a href='https://www.microsoft.com'>Link!</a>",
                    supportHtml: true,
                    isTrusted: true
                },
            ]
        }
	}
});

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

0 replies

alexdima · 2021-10-12T22:03:04Z

alexdima
Oct 12, 2021
Maintainer

@rcjsuen When I try your snippet, I actually see the correct HTML, so the lack of navigation might be some limitation of the playground's <iframe>:

0 replies

rcjsuen · 2021-10-12T22:30:36Z

rcjsuen
Oct 12, 2021

@alexdima Yeah, I see the same thing. I copy/pasted it to my personal project and it doesn't work there either. I cut my HTML down and it didn't really help.

<!DOCTYPE html>
<html>

<head>
    <script src="vs/loader.js"></script>
    <script src="bundle.js"></script>
</head>
<style type="text/css">
    html,
    body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }

    #container {
        margin: 0;
        border: 0;
        min-width: 100%;
        min-height: 100%;
    }
</style>

<body>
    <div id="container"></div>
</body>

</html>

0 replies

dehoward · 2021-10-12T22:41:46Z

dehoward
Oct 12, 2021

@rcjsuen thanks for catching my mistake. I see the link now with no navigation as you mentioned.
does a <button> work for you? I just see text on my end.

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: "<button onclick='alert(1)'>button!</button>",
                    supportHtml: true,
                    isTrusted: true
                },
            ]
        }
	}
});

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

@alexdima @mjbvz it may be helpful to have some documentation around which "subset of HTML elements" are allowed if there isn't some already.

0 replies

alexdima · 2021-10-12T22:47:57Z

alexdima
Oct 12, 2021
Maintainer

@dehoward This is not really my area. @mjbvz Can you please help us here?

0 replies

rcjsuen · 2021-10-12T22:56:34Z

rcjsuen
Oct 12, 2021

it may be helpful to have some documentation around which "subset of HTML elements" are allowed if there isn't some already.

@dehoward It's not documented but it's in the code comments. Neither input or button is supported.

0 replies

mjbvz · 2021-10-13T00:22:25Z

mjbvz
Oct 13, 2021
Maintainer

Yes that's correct @rcjsuen

We only allow a safe subset of html tags and attributes (these are not listed directly in the JSDoc for supportHtml because that list would likely quickly get out of date). Our safe subset is limited to document-style element, so no buttons or forms. Additionally, you can't use scripts/styles inside the markdown string, so no onclick handlers

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML support in hover (inline HTML in IMarkdownString) #3760

{{title}}

Replies: 17 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

HTML support in hover (inline HTML in IMarkdownString) #3760

Replies: 17 comments · 1 reply

ryanlin1986 Apr 6, 2018 Author

alexdima Oct 12, 2021 Maintainer

alexdima Oct 12, 2021 Maintainer

alexdima Oct 12, 2021 Maintainer

mjbvz Oct 13, 2021 Maintainer

Replies: 17 comments 1 reply

ryanlin1986
Apr 6, 2018
Author

alexdima
Oct 12, 2021
Maintainer

alexdima
Oct 12, 2021
Maintainer

alexdima
Oct 12, 2021
Maintainer

mjbvz
Oct 13, 2021
Maintainer