CODEWITHSUNDEEP
monaco-editor
Simon H
Simon H

Reputation: 21007

Monaco editor hoverMessage not showing

I'm trying to add error annotations to my monaco editor webcomponent. I have the following code that is being called. But I can find no trace of the hover message - I presume I have to leave the mouse over line 1 of my code - neighter on the screen nor in the dev-console dom viewer?

What am I missing?

// this is a function that lit-element 3.0 requires
firstUpdated() {
    let mbDomNode = document.querySelector("#code-area");
    let codeArea = mbDomNode ? (mbDomNode as HTMLElement) : undefined;

    this.editor = monaco.editor.create(this.container.value!, {
        value: this.getCode(),
        language: this.getLang(),
        theme: this.getTheme(),
        automaticLayout: true,
        minimap: {
            enabled: false,
        },
        // lineNumbers: "off",
        // ariaContainerElement essential for Elm virtual dom
        ariaContainerElement: codeArea,
        glyphMargin: true,
    });
    monaco.languages.register({ id: "mix" });
    monaco.languages.setMonarchTokensProvider("mix", mixLang);
}

addError(err: { row: number; message: string }) {
    // `!` is the non-null assertion operator.
    this.editor!.deltaDecorations(
        [],
        [
            {
                range: new monaco.Range(err.row, 1, err.row, 30),
                options: {
                    isWholeLine: true,
                    // class for line of code
                    // className: "error-decoration",
                    // class for space between code and line numbers
                    linesDecorationsClassName: "error-decoration",
                    // FIXME somehow???
                    hoverMessage: { value: err.message },
                    // class for space to left of line numbers
                    // glyphMarginClassName: "error-decoration",
                    // glyphMarginHoverMessage: { value: err.message },
                },
            },
        ]
    );
}

the classes are being added correctly, but there is no message when I hover

enter image description here

On the official site, I can see that it works - https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-line-and-inline-decorations

The difference seems to be that monaco on the official site is creating a div with class overflowingContentWidgets that has lot of child nodes in it. In my implementation this div remains empty. But I have no idea why? (What is true is that I am doing my work in the shadow dom of a web component, wheres MSFT are using an iframe)

enter image description here

Upvotes: 2

Views: 1468

Answers (2)

user3325760
user3325760

Reputation: 1

Extremely late to the party but, for what it's worth, just in case or if someone else bumps into the thread: What you're looking for is: fixedOverflowWidgets option. The issue is css-related.

Upvotes: 0

Simon H
Simon H

Reputation: 21007

Ok, the issue was that I had tried to prevent the compilation of all the language support with

import * as monaco from "monaco-editor";
// import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

and somewhere in this change lay the reduced editor functionality too

Update: the problem returned when I moved to Monaco 0.37 - no solution at present :-(

Upvotes: 2

Related Questions