Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Monaco Editor in Webcomponents, disable adding style to root document #2044

Closed
jogibear9988 opened this issue Jul 16, 2020 · 5 comments
Closed

Monaco Editor in Webcomponents, disable adding style to root document #2044

jogibear9988 opened this issue Jul 16, 2020 · 5 comments
Assignees
@alexdima
Labels
editor-shadow-dom
Milestone
August 2020

Comments

@jogibear9988
Copy link

jogibear9988 commented Jul 16, 2020 •
edited
Loading

I use Monaco Editor inside a webcomponent.

My Code looks like this:

static readonly style = css`
    :host {
        display: block;
        height: 100%;
        width: 100%;
    }
    `;

static readonly template = html`
    <style> @import "/node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <mcc-loading id="loading" text="loading editor" style="width: 100%;  height: 100%; position: absolute; top: 0; left: 0;"></mcc-loading>
`;

private _container: HTMLDivElement;
private _editor: monaco.editor.IStandaloneCodeEditor;

constructor() {
    super();
}

async ready() {
    await LazyLoader.LoadJavascript(monacoLoaderScriptName);
    
    this._container = this._getDomElement<HTMLDivElement>('container')

    //@ts-ignore
    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }});
    
    //@ts-ignore
    require(['vs/editor/editor.main'], () => {
        //@ts-ignore
        this._editor = monaco.editor.create(this._container, {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'csharp'
        });
        this._getDomElement<HTMLDivElement>('loading').style.display = 'none';
    });
  }

This works very well, but the "style" element of the editor is also added to the head of the root document.
Can I stop this?
@jogibear9988
Copy link
Author

related to #619

@alexdima
Copy link
Member

@jogibear9988 Do you mean that a <link> tag is added to the <head>? That would be the loader not knowing that the CSS isn't needed because you're importing it manually. You could use the following: <link rel="stylesheet" data-name="vs/editor/editor.main" href="data:" />. The loader will then find this <link> tag and realize that it doesn't need to load the CSS.

@jogibear9988
Copy link
Author

@alexdima yes, but isn't this solution a bit crap? My component does use the style, not the root document. So my component should not modify the outside DOM. So there should be a setting to disable this behavior.

@alexdima
Copy link
Member

👍 I agree, that's why I didn't close the issue. The AMD css loader plugin currently does not have any option to disable its functioning. So we can use this issue to track that.

@alexdima alexdima added this to the August 2020 milestone Sep 17, 2020
alexdima added a commit to microsoft/vscode that referenced this issue Sep 18, 2020
@alexdima
Update the loader (fixes microsoft/monaco-editor#2044)
af09003
@alexdima
Copy link
Member

There will be a new option for configuring:

require.config({ 'vs/css': { disabled: true } })

And that will prevent the CSS loader from creating any <link> tags.

@alexdima alexdima self-assigned this Sep 18, 2020
alexdima added a commit to microsoft/vscode that referenced this issue Sep 21, 2020
@alexdima
Update the loader (fixes microsoft/monaco-editor#2044)
46319e3
meganrogge pushed a commit to meganrogge/vscode that referenced this issue Sep 22, 2020
@alexdima @meganrogge
Update the loader (fixes microsoft/monaco-editor#2044)
1689dd1
@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alexdima alexdima

Labels
editor-shadow-dom
Projects
None yet
Milestone
August 2020
Development

No branches or pull requests
2 participants
@jogibear9988 @alexdima