dees-editor/ts_web/elements/dees-editor.ts

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 {
    'dees-editor': DeesEditor;
  }
}

@customElement('dees-editor')
export class DeesEditor extends DeesElement {
  public static demo = () => html`
    <dees-editor></dees-editor>
  `;

  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`
      <div class="mainbox">
        <div id="container"></div>
      </div>
    `;
  }

  public async firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    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 = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
        value: "function hello() {\n\talert('Hello world!');\n}",
        language: 'markdown',
        theme: 'vs-dark',
        useShadowDOM: true,
        fontSize: 16,
        automaticLayout: true,
      });
      
    });
    const css = await (await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')).text();
    const styleElement = document.createElement('style');
    styleElement.textContent = css;
    this.shadowRoot.append(styleElement);
  }
}