'Make clearer hint and its corresponding range

I use Monaco Editor to build our editor. I use registerHoverProvider to show hints when hovering over some texts. There is a situation where several hints are relevant when hovering over one position. For instance,

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

var ed = monaco.editor.create(document.getElementById("container"), {
    value: "sum()",
    language: "mySpecialLanguage"
});

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
            return {
                range: new monaco.Range(1,1,1,6),
                contents: [
                    { value: 'This function name should be "SUM"' },
                    { value: 'This formula should have at least one argument'}
                ]
            };
    }
});

When hovering on a position inside sum, two hints are relevant. The first hint about the function name refers to sum; the second hint about the formula refers to the entire formula sum(). But the restriction is, we could only set one range to highlight (at the moment we highlight (1,1,1,6)). This may be confusing when the text is long; users don't know which hint refers to which range.

One possible improvement is to for instance when we hover on a hint, the corresponding range will be highlighted.

Does anyone have any idea to make clearer hint <-> corresponding range with the current Monaco Editor?

(* Link on GitHub: https://github.com/microsoft/monaco-editor/issues/3053 *)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source