Added Json specific code editor component

src/modules/Elsa.Studio.UIHints/Components/Json.razor

@@ -0,0 +1,20 @@
+@using BlazorMonaco.Editor
+
+@{
+ var inputDescriptor = EditorContext.InputDescriptor;
+ var displayName = inputDescriptor.DisplayName;
+ var description = inputDescriptor.Description;
+}
+
+<ExpressionInput EditorContext="@EditorContext">
+ <ChildContent>
+ <MudField Variant="Variant.Outlined" Label="@displayName" HelperText="@description" Margin="Margin.Dense">
+ <StandaloneCodeEditor
+ @ref="_monacoEditor"
+ Id="@_monacoEditorId"
+ ConstructionOptions="ConfigureMonacoEditor"
+ CssClass="studio-expression-input-monaco-editor studio-monaco-editor-large"
+ OnDidChangeModelContent="OnMonacoContentChanged"/>
+ </MudField>
+ </ChildContent>
+</ExpressionInput>

src/modules/Elsa.Studio.UIHints/Components/Json.razor.cs

@@ -0,0 +1,91 @@
+using BlazorMonaco.Editor;
+using Elsa.Api.Client.Resources.Scripting.Models;
+using Elsa.Api.Client.Shared.UIHints.CodeEditor;
+using Elsa.Studio.Extensions;
+using Elsa.Studio.Models;
+using Elsa.Studio.UIHints.Extensions;
+using Microsoft.AspNetCore.Components;
+using ThrottleDebounce;
+
+namespace Elsa.Studio.UIHints.Components;
+
+/// <summary>
+/// A component that renders a code editor.
+/// </summary>
+public partial class Json : IDisposable
+{
+ private readonly string _monacoEditorId = $"monaco-editor-{Guid.NewGuid()}:N";
+ private StandaloneCodeEditor? _monacoEditor;
+ private string? _lastMonacoEditorContent;
+ private readonly RateLimitedFunc<Task> _throttledValueChanged;
+ private CodeEditorOptions _codeEditorOptions = new();
+
+ /// <inheritdoc />
+ public Json()
+ {
+ _throttledValueChanged = Debouncer.Debounce(InvokeValueChangedCallback, TimeSpan.FromMilliseconds(500));
+ }
+
+ /// <summary>
+ /// The context for the editor.
+ /// </summary>
+ [Parameter] public DisplayInputEditorContext EditorContext { get; set; } = default!;
+
+ private string InputValue => EditorContext.GetLiteralValueOrDefault();
+
+ /// <inheritdoc />
+ protected override void OnInitialized()
+ {
+ _codeEditorOptions = EditorContext.InputDescriptor.GetCodeEditorOptions();
+ }
+
+ private StandaloneEditorConstructionOptions ConfigureMonacoEditor(StandaloneCodeEditor editor)
+ {
+ var language = _codeEditorOptions.Language ?? "javascript";
+
+ return new StandaloneEditorConstructionOptions
+ {
+ Language = language,
+ Value = InputValue,
+ FontFamily = "Roboto Mono, monospace",
+ RenderLineHighlight = "none",
+ Minimap = new EditorMinimapOptions
+ {
+ Enabled = false
+ },
+ AutomaticLayout = true,
+ LineNumbers = "on",
+ Theme = "vs",
+ RoundedSelection = true,
+ ScrollBeyondLastLine = false,
+ ReadOnly = false,
+ OverviewRulerLanes = 0,
+ OverviewRulerBorder = false,
+ LineDecorationsWidth = 0,
+ HideCursorInOverviewRuler = true,
+ GlyphMargin = false
+ };
+ }
+
+ private async Task OnMonacoContentChanged(ModelContentChangedEvent e)
+ {
+ await _throttledValueChanged.InvokeAsync();
+ }
+
+ private async Task InvokeValueChangedCallback()
+ {
+ var value = await _monacoEditor!.GetValue();
+
+ // This event gets fired even when the content hasn't changed, but for example when the containing pane is resized.
+ // This happens from within the monaco editor itself (or the Blazor wrapper, not sure).
+ if (value == _lastMonacoEditorContent)
+ return;
+
+ _lastMonacoEditorContent = value;
+ var expression = Expression.CreateLiteral(value);
+
+ await InvokeAsync(async () => await EditorContext.UpdateExpressionAsync(expression));
+ }
+
+ void IDisposable.Dispose() => _throttledValueChanged.Dispose();
+}

src/modules/Elsa.Studio.UIHints/Handlers/JsonEditorHandler.cs

@@ -14,8 +14,8 @@ public RenderFragment DisplayInputEditor(DisplayInputEditorContext context)
  {
  return builder =>
  {
- builder.OpenComponent(0, typeof(Code));
- builder.AddAttribute(1, nameof(Code.EditorContext), context);
+ builder.OpenComponent(0, typeof(Json));
+ builder.AddAttribute(1, nameof(Json.EditorContext), context);
  builder.CloseComponent();
  };
  }