canvasManagement/Management.Web/Shared/Components/MonacoEditorDemo.razor

@using BlazorMonaco
@using BlazorMonaco.Editor

<h3>Code Editor</h3>

<div>
    <div style="margin:10px 0;">
        New Value: <input type="text" @bind="_valueToSet" style="width: 400px;" /> <button @onclick="SetValue">Set Value</button>
    </div>
    <div style="margin:10px 0;">
        <button @onclick="GetValue">Get Value</button>
    </div>
    <div style="margin:10px 0;">
        See the console for results.
    </div>
</div>

<div 
  style="height: 300px"
>
<StandaloneCodeEditor 
  @ref="_editor" 
  Id="sample-code-editor-123" 
  ConstructionOptions="EditorConstructionOptions" 
  OnDidInit="EditorOnDidInit"
/>
</div>

@code {
    private StandaloneCodeEditor _editor = null!;
    private string _valueToSet = "";

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
        {
            Language = "markdown",
            Theme = "vs-dark",
            TabSize = 2,
            Value = "this is the default \n value",
            Minimap = new EditorMinimapOptions { Enabled = false }
        };
    }

    private async Task EditorOnDidInit()
    {
        await _editor.AddCommand((int)KeyMod.CtrlCmd | (int)KeyCode.KeyH, (args) =>
        {
            Console.WriteLine("Ctrl+H : Initial editor command is triggered.");
        });

        var newDecorations = new ModelDeltaDecoration[]
        {
            new ModelDeltaDecoration
            {
                Range = new BlazorMonaco.Range(3,1,3,1),
                Options = new ModelDecorationOptions
                {
                    IsWholeLine = true,
                    ClassName = "decorationContentClass",
                    GlyphMarginClassName = "decorationGlyphMarginClass"
                }
            }
        };

        decorationIds = await _editor.DeltaDecorations(null, newDecorations);
        // You can now use 'decorationIds' to change or remove the decorations
    }

    private string[] decorationIds = new string[0];

    private async Task SetValue()
    {
        Console.WriteLine($"setting value to: {_valueToSet}");
        await _editor.SetValue(_valueToSet);
    }

    private async Task GetValue()
    {
        var val = await _editor.GetValue();
        Console.WriteLine($"value is: {val}");
    }
}