feat(editor/runtime): Replace bare editor with Monaco-based editor and add runtime + workspace/filetree integration

ts_web/elements/00group-editor/dees-editor-monaco/dees-editor-monaco.ts

@@ -0,0 +1,153 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { MONACO_VERSION } from './version.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+import type * as monaco from 'monaco-editor';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editor-monaco': DeesEditorMonaco;
+  }
+}
+
+@customElement('dees-editor-monaco')
+export class DeesEditorMonaco extends DeesElement {
+  // DEMO
+  public static demo = () => html`<dees-editor-monaco></dees-editor-monaco>`;
+
+  // STATIC
+  public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
+
+  // INSTANCE
+  public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
+  public language = 'typescript';
+
+  @property({
+    type: String
+  })
+  accessor content = "function hello() {\n\talert('Hello world!');\n}";
+
+  @property({
+    type: Object
+  })
+  accessor contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
+
+  @property({
+    type: Boolean
+  })
+  accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
+
+  private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :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');
+    const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
+
+    if (!DeesEditorMonaco.monacoDeferred) {
+      DeesEditorMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
+      const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
+      const script = document.createElement('script');
+      script.src = scriptUrl;
+      script.onload = () => {
+        DeesEditorMonaco.monacoDeferred.resolve();
+      };
+      document.head.appendChild(script);
+    }
+    await DeesEditorMonaco.monacoDeferred.promise;
+
+    (window as any).require.config({
+      paths: { vs: `${monacoCdnBase}/min/vs` },
+    });
+    (window as any).require(['vs/editor/editor.main'], async () => {
+      // Get current theme from domtools
+      const domtoolsInstance = await this.domtoolsPromise;
+      const isBright = domtoolsInstance.themeManager.goBrightBoolean;
+      const initialTheme = isBright ? 'vs' : 'vs-dark';
+
+      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
+        value: this.content,
+        language: this.language,
+        theme: initialTheme,
+        useShadowDOM: true,
+        fontSize: 16,
+        automaticLayout: true,
+        wordWrap: this.wordWrap
+      });
+
+      // Subscribe to theme changes
+      this.monacoThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+        const newTheme = goBright ? 'vs' : 'vs-dark';
+        editor.updateOptions({ theme: newTheme });
+      });
+
+      this.editorDeferred.resolve(editor);
+    });
+    const css = await (
+      await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)
+    ).text();
+    const styleElement = document.createElement('style');
+    styleElement.textContent = css;
+    this.shadowRoot.append(styleElement);
+
+
+    // editor is setup let do the rest
+    const editor = await this.editorDeferred.promise;
+    editor.onDidChangeModelContent(async eventArg => {
+      this.contentSubject.next(editor.getValue());
+    });
+    this.contentSubject.next(editor.getValue());
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    if (this.monacoThemeSubscription) {
+      this.monacoThemeSubscription.unsubscribe();
+      this.monacoThemeSubscription = null;
+    }
+  }
+}

ts_web/elements/00group-editor/dees-editor-monaco/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor-monaco.js';

ts_web/elements/00group-editor/dees-editor-monaco/version.ts

@@ -0,0 +1,2 @@
+// Auto-generated by scripts/update-monaco-version.cjs
+export const MONACO_VERSION = '0.52.2';