import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; const deferred = domtools.plugins.smartpromise.defer(); let monacoDeferred: typeof deferred; import type * as monaco from 'monaco-editor'; declare global { interface HTMLElementTagNameMap { 'first-element': DeesEditor; } } @customElement('dees-editor') export class DeesEditor extends DeesElement { public static demo = () => html` `; @property({ type: String }) public aProp: string = 'loading...'; constructor() { super(); domtools.DomTools.setupDomTools(); } public static styles = [ domtools.elementBasic.staticStyles, css` :host { } * { box-sizing: border-box; } #container { position: absolute; height: 100%; width: 100%; } ` ] public render (): TemplateResult { return html`
`; } public async firstUpdated (_changedProperties: Map): Promise { super.firstUpdated(_changedProperties); const container = this.shadowRoot.getElementById('container'); if (!monacoDeferred) { monacoDeferred = domtools.plugins.smartpromise.defer(); const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`; const script = document.createElement('script'); script.src = scriptUrl; script.onload = () => { monacoDeferred.resolve(); } document.head.appendChild(script); } await monacoDeferred.promise; (window as any).require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor/min/vs" } }); (window as any).require([ "vs/editor/editor.main" ], function () { const editor: monaco.editor.IStandaloneCodeEditor = (window as any).monaco.editor.create(container, { value: "function hello() {\n\talert('Hello world!');\n}", language: 'javascript', theme: 'vs-dark', useShadowDOM: true }); }); } }