feat: implement Monaco Editor component with HTML, CSS, and JavaScript integration

Author: caperaven

app/home/home.html

@@ -12,4 +12,5 @@ <h2>Home</h2>
     <li><a href="/material-icons">Material Icons</a></li>
     <li><a href="/activity-state">Activity State</a></li>
     <li><a href="/web-nn">Web NN</a></li>
+    <li><a href="/monaco-editor">Monaco Editor</a></li>
 </ul>

app/monaco-editor/monaco-editor.css

@@ -0,0 +1,18 @@
+:host {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	padding: var(--padding);
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+#editor-wrapper {
+	height: 100%;
+	width: 100%;
+}
+
+#editor-container {
+	height: 100%;
+	width: 100%;
+}

app/monaco-editor/monaco-editor.html

@@ -0,0 +1,2 @@
+<app-header><h2>Monaco Editor</h2></app-header>
+<monaco-editor></monaco-editor>

app/monaco-editor/monaco-editor.js

@@ -0,0 +1,18 @@
+import "./../../components/monaco-editor/monaco-editor.js";
+
+export default class MonacoEditorView extends HTMLElement {
+	static tag = "monaco-editor-view";
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	async connectedCallback() {
+		this.shadowRoot.innerHTML = await api.call("component", "load_html", {
+			url: import.meta.url,
+		});
+	}
+}
+
+customElements.define(MonacoEditorView.tag, MonacoEditorView);

components/monaco-editor/monaco-editor.css

@@ -0,0 +1,6 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}

components/monaco-editor/monaco-editor.html

@@ -0,0 +1,7 @@
+const thisCSSUrl = import.meta.url.replace(".html.js", ".css");
+const monacoCSSUrl = new URL("./node_modules/monaco-editor/min/vs/editor/editor.main.css", import.meta.url).href;
+
+export const HTML = `
+<link rel="stylesheet" href="${thisCSSUrl}"/>
+<link rel="stylesheet" href="${monacoCSSUrl}" data-name="vs/editor/editor.main"/>
+`;

components/monaco-editor/monaco-editor.html.js

@@ -0,0 +1,37 @@
+import { HTML } from "./monaco-editor.html.js";
+import "./require.js";
+
+export default class MonacoEditor extends HTMLElement {
+    static tag = "monaco-editor";
+
+    #editor;
+
+    get language() {
+        return this.dataset.language ?? "json";
+    }
+
+    get theme() {
+        return this.dataset.theme ?? "vs-dark";
+    }
+    
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = HTML;
+    }
+
+    async connectedCallback() {
+        await import("./node_modules/monaco-editor/min/vs/loader.js");
+        await import("./node_modules/monaco-editor/min/vs/editor/editor.main.js");
+        
+
+        this.#editor = monaco.editor.create(this.shadowRoot.querySelector("#editor"), {
+            value: this.textContent,
+            language: this.language,
+            theme: this.theme,
+            automaticLayout: true,
+        });
+    }
+};
+
+customElements.define(MonacoEditor.tag, MonacoEditor);