Hover toolkit with actions

Question

I'm trying to figure out how to configure the hover toolkit in monaco editor with clickable actions like in VS Code (see screenshot below) that execute another function. My app is react-based. I'd appreciate any ideas.

Example:

.

Dummy code:

const hoverProvider = monaco.languages.registerHoverProvider(mylang, {
      provideHover: (model, position) => {
          return {
            range: new monaco.Range(
              position.lineNumber,
              position.lineNumber,
              model.getWordAtPosition(position).startColumn,
              model.getWordAtPosition(position).endColumn,
            ),
            contents: [
              { supportHtml:true, value: `<>What html element here ?</>` },
            ],
          };
        }
      },
    });

I've tried rendering a component into a string using the ReactDOMServer, but it didn't work as well as other HTML elements, buttons, etc.

Answer 1

You cannot add HTML in the hover contents, but Markup text, which also supports links.

Create your contents array like this:

contents: [
    { value: "```ts\nlet a: string\n```" },
    { value: "[Hello](http://www.microsoft.com)" },
],

In fact that contents array is defined as:

    export interface Hover {
        /**
         * The contents of this hover.
         */
        contents: IMarkdownString[];
        /**
         * The range to which this hover applies. When missing, the
         * editor will use the range at the current position or the
         * current position itself.
         */
        range?: IRange;
    }