microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.37k stars 3.59k forks source link

[Bug] Regression: Hover Provider not working in Shadow DOM #3983

Closed DrNiels closed 1 year ago

DrNiels commented 1 year ago

Reproducible in vscode.dev or in VS Code Desktop?

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

const container = document.getElementById('container');
const shadowRoot = container.attachShadow({
  mode: 'closed'
});

const innerContainer = document.createElement('div');
shadowRoot.appendChild(innerContainer);
innerContainer.style.width = '800px';
innerContainer.style.height = '600px';

const editor = monaco.editor.create(innerContainer, {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
    language: 'javascript'
});

// Copy over editor styles
const styles = document.querySelectorAll(
    "link[rel='stylesheet'][data-name^='vs/']"
);
for (const style of styles) {
    shadowRoot.appendChild(style.cloneNode(true));
}

window.monaco.languages.registerHoverProvider('javascript', {
provideHover: (a, b) => {
    console.log('Hover');
    return {
            range: new monaco.Range(
                1,
                1,
                editor.getModel().getLineCount(),
                editor.getModel().getLineMaxColumn(editor.getModel().getLineCount())
            ),
            contents: [
                { value: "**SOURCE**" },
            ],
        };
}
});

Reproduction Steps

I load Monaco within a shadowDOM, similar to the corresponding sample code (https://github.com/microsoft/monaco-editor/blob/main/samples/browser-amd-shadow-dom/index.html) and try to add a hover provider.

Actual (Problematic) Behavior

The result from the hover provider is not shown and the function not even executed.

Expected Behavior

I expect the corresponding hover function to be executed and its content be displayed

Additional Context

For Monace Version 33.0 or lower, this is working just fine, but not for higher versions as of 34.0. You can check an example with version 38.0 here: https://codepen.io/DrNiels/pen/WNaBJdj which does not provide hover. If you load the same example, only with monaco 33.0, everything is working fine: https://codepen.io/DrNiels/pen/BaqeqvP Due to the console.log within the hover provider, you can see, that the hover provider is not even executed.

hediet commented 1 year ago

Please provide an example that runs in the playground (there is a sample). Thanks!

DrNiels commented 1 year ago

Ah, sorry for that, I thought it was easier with an example where you can compare the different versions. I edited my initial description and added a link to the playground. Is that fine? Do you want me to open another issue or will you reopen this one?

hediet commented 1 year ago

/duplicate #3409

I recommend to use the labels to search for duplicates.

Ah, sorry for that, I thought it was easier with an example where you can compare the different versions

The playground allows to do a bisect on all the monaco versions and also allows to debug from source. It is an environment we control to rule out a bunch of user-configuration issues and it shows that the bug is serious enough for the bug-author to attempt a reproduction in the playground.

Also, both your code-pens point to the same code? And if codepen ever goes down, this issue would not be readable anymore.

Feel free to use the bisect tool to find out on which day it broke.