feat(ui/design): Monaco editor for script code fields

Vendors Monaco 0.55.1 min/vs/ (~15 MB) at wwwroot/lib/monaco/vs/. No CDN dependency; works on air-gapped deployments. Loaded lazily on first script-edit via the AMD loader. wwwroot/js/monaco-init.js exposes window.MonacoBlazor with createEditor / setValue / getValue / setMarkers / dispose. Handles loader bootstrap, DotNet round-trip on content change, and marker sets for later diagnostic wiring. Components/Shared/MonacoEditor.razor is a Blazor wrapper with Value / ValueChanged / Language / Height / ReadOnly parameters and IAsyncDisposable teardown. Bidirectional binding tracks _lastSentValue to avoid push/pull loops. Replaces the plain textareas in SharedScriptForm, TemplateEdit's Add-Script form, and ApiMethodForm. Default height 320px ≈ the previous rows=10. Build / tests / dialog flow unaffected. Wave 1 of three. Roslyn-backed completions and SCADA-specific extensions follow in subsequent commits.
2026-05-12 04:34:41 -04:00
parent e667ea2b50
commit 7f01c5547a
127 changed files with 71464 additions and 5 deletions
@@ -0,0 +1,69 @@
+@namespace ScadaLink.CentralUI.Components.Shared
+@implements IAsyncDisposable
+@inject IJSRuntime JS
+
+<div @ref="_hostRef" class="monaco-editor-host"
+     style="height: @Height; border: 1px solid var(--bs-border-color); border-radius: 0.25rem; overflow: hidden;"></div>
+
+@code {
+    [Parameter] public string Value { get; set; } = "";
+    [Parameter] public EventCallback<string> ValueChanged { get; set; }
+    [Parameter] public string Language { get; set; } = "csharp";
+    [Parameter] public string Height { get; set; } = "320px";
+    [Parameter] public bool ReadOnly { get; set; } = false;
+
+    private ElementReference _hostRef;
+    private DotNetObjectReference<MonacoEditor>? _dotNetRef;
+    private readonly string _id = Guid.NewGuid().ToString("N");
+    private string _lastSentValue = "";
+    private bool _initialized;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _dotNetRef = DotNetObjectReference.Create(this);
+            _lastSentValue = Value ?? "";
+            try
+            {
+                await JS.InvokeVoidAsync(
+                    "MonacoBlazor.createEditor",
+                    _id,
+                    _hostRef,
+                    new
+                    {
+                        value = Value ?? "",
+                        language = Language,
+                        readOnly = ReadOnly
+                    },
+                    _dotNetRef);
+                _initialized = true;
+            }
+            catch
+            {
+                // Prerendering or JS not ready — swallow; subsequent render will retry.
+            }
+        }
+        else if (_initialized && (Value ?? "") != _lastSentValue)
+        {
+            _lastSentValue = Value ?? "";
+            try { await JS.InvokeVoidAsync("MonacoBlazor.setValue", _id, _lastSentValue); } catch { }
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnValueChanged(string newValue)
+    {
+        _lastSentValue = newValue ?? "";
+        await ValueChanged.InvokeAsync(_lastSentValue);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_initialized)
+        {
+            try { await JS.InvokeVoidAsync("MonacoBlazor.dispose", _id); } catch { }
+        }
+        _dotNetRef?.Dispose();
+    }
+}