feat(adminui): vendor Monaco + reusable MonacoEditor component (no providers yet)

2026-06-09 14:03:24 -04:00
parent a2dbc5e2da
commit 9afb2d230e
124 changed files with 71539 additions and 0 deletions
@@ -0,0 +1,72 @@
+(function () {
+    const VS_BASE = "/_content/ZB.MOM.WW.OtOpcUa.AdminUI/lib/monaco/vs";
+    const editors = {};
+    let readyPromise = null;
+
+    function ensureLoaded() {
+        if (readyPromise) return readyPromise;
+        readyPromise = new Promise(function (resolve, reject) {
+            const loader = document.createElement("script");
+            loader.src = VS_BASE + "/loader.js";
+            loader.onload = function () {
+                require.config({ paths: { vs: VS_BASE } });
+                require(["vs/editor/editor.main"], function () {
+                    registerCSharpProviders();
+                    resolve();
+                });
+            };
+            loader.onerror = function (e) { reject(e); };
+            document.head.appendChild(loader);
+        });
+        return readyPromise;
+    }
+
+    // Task 9 fills these in (Roslyn-backed providers + real diagnostics fetch).
+    function registerCSharpProviders() { }
+    async function fetchDiagnostics(model) { return []; }
+
+    async function createEditor(id, host, options, dotNetRef) {
+        await ensureLoaded();
+        if (!host) return;
+        const editor = monaco.editor.create(host, {
+            value: options.value || "", language: options.language || "csharp",
+            theme: "vs", minimap: { enabled: false }, scrollBeyondLastLine: false,
+            automaticLayout: true, fontSize: 13, lineNumbers: "on",
+            renderLineHighlight: "line", readOnly: !!options.readOnly,
+            tabSize: 4, insertSpaces: true, wordWrap: "off", fixedOverflowWidgets: true
+        });
+        let diagTimer = null;
+        const scheduleDiagnostics = function () {
+            if (diagTimer) clearTimeout(diagTimer);
+            diagTimer = setTimeout(async function () {
+                const model = editor.getModel(); if (!model) return;
+                const markers = await fetchDiagnostics(model);
+                monaco.editor.setModelMarkers(model, "otopcua", markers);
+                dotNetRef.invokeMethodAsync("OnMarkersChanged", markers).catch(function () {});
+            }, 500);
+        };
+        editor.onDidChangeModelContent(function () {
+            dotNetRef.invokeMethodAsync("OnValueChanged", editor.getValue()).catch(function () {});
+            if (options.language === "csharp") scheduleDiagnostics();
+        });
+        editors[id] = { editor: editor, dotNetRef: dotNetRef };
+        if (options.language === "csharp") scheduleDiagnostics();
+    }
+    function setEditorOption(id, name, value) {
+        const e = editors[id]; if (!e) return;
+        // Note: monaco.editor.setTheme is global — it re-themes every editor on the page, not just this id.
+        if (name === "theme") { monaco.editor.setTheme(value); return; }
+        const u = {}; u[name] = value; e.editor.updateOptions(u);
+    }
+    function format(id) { editors[id]?.editor.getAction("editor.action.formatDocument")?.run(); }
+    function revealLine(id, line, col) {
+        const e = editors[id]; if (!e) return;
+        e.editor.revealLineInCenter(line); e.editor.setPosition({ lineNumber: line, column: col || 1 }); e.editor.focus();
+    }
+    function setValue(id, v) { const e = editors[id]; if (e && e.editor.getValue() !== v) e.editor.setValue(v || ""); }
+    function getValue(id) { const e = editors[id]; return e ? e.editor.getValue() : null; }
+    function setMarkers(id, m) { const e = editors[id]; const model = e && e.editor.getModel(); if (model) monaco.editor.setModelMarkers(model, "otopcua", m || []); }
+    function dispose(id) { const e = editors[id]; if (!e) return; try { e.editor.dispose(); } catch (x) {} delete editors[id]; }
+
+    window.MonacoBlazor = { createEditor, setValue, getValue, setMarkers, setEditorOption, format, revealLine, dispose };
+})();