Hi,

I tried using the element in ShadowDom, and it does not work.

I've created a webcomonent that works in Shadow Dom. However the styling is off...

https://gitlab.com/designestate/dees-editor/-/blob/master/ts_web/elements/dees-editor.ts

maybe someone can solve it, how to properly make styling work, even when nested in Shadow Dom.

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at i (index.js:1)
    at s (index.js:1)
    at index.js:1
    at Object.self.MonacoEnvironment.getWorkerUrl (index.js:1)
    at o (index.js:1)
    at Object.self.MonacoEnvironment.getWorkerUrl (index.js:1)
    at o (index.js:1)
    at Module.self.MonacoEnvironment.getWorkerUrl (index.js:1)
    at o (index.js:1)

My code:

import React from "react";
import { App } from "./demo";
export default { title: "Button" };
const s = document.createElement("script");
s.type = "module";
s.src = "https://cdn.jsdelivr.net/npm/@vanillawc/wc-monaco-editor/index.js";
document.body.appendChild(s);
function Editor(props: { value: string }) {
    const ref = React.useRef<HTMLDivElement>(null);
    React.useEffect(() => {
        if (!ref.current) return;
        const dom = document.createElement("wc-wc-monaco-editor");
        dom.setAttribute("id", Math.random().toString());
        dom.setAttribute("language", "javascript");
        ref.current.appendChild(dom);
        return () => dom.remove();
    }, [ref.current]);
    React.useEffect(() => {
        if (!ref.current) return;
        // @ts-ignore
        ref.current.firstChild!.value = props.value;
    }, [ref.current, props.value]);
    return <div ref={ref}></div>;
}
export const Demo = () => (
    <>
                    <Editor value="return <div>AAAAAAAAA</div>;" />
                    <Editor value="return <div>Hello world!</div>;" />
    </>
);

Add the themes from this collection as well as a theme attribute to set the setting on initialization

Use ResizeObserver to detect when the dimensions of the editor box change and resize the Monaco instance to match.

Ref: https://github.com/juggle/resize-observer

Find a better strategy for bundling Monaco that doesn't require the vendor/ directory.

Blocked: waiting for Webpack to add support for import.meta

I tried to use wc-monaco-editor on a new React project that I created with create-react-app.
But I always get this error message:

./node_modules/@vanillawc/wc-monaco-editor/index.js
SyntaxError: C:\wegdamit\empty-react\node_modules\@vanillawc\wc-monaco-editor\index.js: Support for the experimental syntax 'importMeta' isn't currently enabled (9:45):

   7 | /* eslint no-undef: 0 */
   8 | 
>  9 | const monacoDir = new URL('monaco/', import.meta.url);
     |                                             ^
  10 | 
  11 | // eslint-disable-next-line
  12 | self.MonacoEnvironment = {

Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

Also adding @babel/plugin-syntax-import-meta as a Babel plugin didn't work. Because it's a CRA project I couldn't edit the Babel config directly, so I followed this guide and used customize-cra and react-app-rewired to change the config: https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/

Upgrade 'Monaco Editor' to v0.23.0

Add the ability to load the source from an inline <script> tag

<wc-monaco-editor language="javascript">
  <script type="wc-content">
      function myGoodPerson(){
        return "what can I do for you ?"
      }
  </script>
</wc-monaco-editor>

The import from CDN (on README.md) doesn't work, or I'm doing something really wrong.
Everytime I type a letter it throws a new error.

I'm using rollup + svelte and can't really import from npm / don't know how.
Tried several ways, only thing working was just putting it into the static folder, but that's pretty slow and hacky.
So the CDN solution would be best.

Hi, i think this project is great! just an obvious question to ask before i evaluate whether i can use it - how do you pass configuration options to monaco? it doesnt seem possible from the docs.

Hello, thank you for the great component!

I am trying to use this web component in Elm and it is working well.
But there is one small issue if I am trying to put property value from Elm to the web component.

Sorry, I am not good at developing using web components, so perhaps I am missing something.

I am getting the following call chain when I am trying to set value property.

I have modified the code in index.js to check this.editor for null as it is failing without it.

And it seems that Elm somehow is able to call value property before the method connectedCallback has been called (so this.editor is null).

I am wondering if it is the issue with the web component itself (missing null check) or I am doing something wrong here.
Thank you in advance for your help!

Hello I was just trying the demo on https://vanillawc.github.io/wc-monaco-editor/demo/index.html
And looking at the jsconsole I get this error:

Error: Unexpected usage
    at e.loadForeignModule (index.min.js:1)
    at index.min.js:1

each time I enter a new character

Hi,
Any special reason not using the latest version 20.0 of the Monaco editor?

When importing from CDN and trying to use the language features, whether by adding a language attribute to the component or programmatically, you get the error message "Unexpected usage" on every keystroke.

Fiddle

This has an essential fix for many WebComp users in that the ariaContentArea can now be specificied by the developer. this prevents stuff being arbitraily added to the DOM which breaks some language's virtual dom implementations

microsoft/vscode#131865

I tried to load the demo page by dragging and dropping index.html into my browser and got

Access to script at 'file:///Users/.../wc-monaco-editor-main/index.min.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I also tried it with a simple dev server and got

Failed to load module script: The server responded with a non-JavaScript, CSS MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Thanks for sharing your work! I’m excited to try it out. It may not be working as expected. I’ll look into why, but here are the details.

• URL: https://vanillawc.github.io/wc-monaco-editor/demo/demo.html
• Browser: Safari 13.0.2 (15608.2.30.1.1)
• Error: SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list.