BlazorMonaco/SampleApp/Pages/Index.razor

@page "/"
@inject IJSRuntime jsRuntime

<h3>Code Editor</h3>

<div>
    <div style="margin:10px 0;">
        Theme:
        <select @onchange="ChangeTheme">
            <option value="vs">Visual Studio</option>
            <option value="vs-dark">Visual Studio Dark</option>
            <option value="hc-black">High Contrast Black</option>
        </select>
    </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;">
        <button @onclick="AddCommand">Add Command</button> <span style="font-size:10px">Ctrl+Enter to trigger the command.</span>
    </div>
    <div style="margin:10px 0;">
        <button @onclick="AddAction">Add Action</button> <span style="font-size:10px">Ctrl+B to trigger the action.</span>
    </div>
    <div style="margin:10px 0;">
        <button @onclick="RegisterCodeActionProvider">RegisterCodeActionProvider</button> <span style="font-size:10px">Hover over the "this" on line:4</span>
    </div>
    <div style="margin:10px 0;">
        <button @onclick="RegisterCompletionItemProvider">RegisterCompletionItemProvider</button> <span style="font-size:10px">Ctrl+Space on the "this" on line:4</span>
    </div>
    <div style="margin:10px 0;">
        See the console for the button results.
    </div>
</div>

<StandaloneCodeEditor @ref="_editor" Id="sample-code-editor-123" ConstructionOptions="EditorConstructionOptions" OnDidInit="EditorOnDidInit" OnContextMenu="OnContextMenu" />

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

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
        {
            Language = "javascript",
            GlyphMargin = true,
            Value = "\"use strict\";\n" +
                    "function Person(age) {\n" +
                    "	if (age) {\n" +
                    "		this.age = age;\n" +
                    "	}\n" +
                    "}\n" +
                    "Person.prototype.getAge = function () {\n" +
                    "	return this.age;\n" +
                    "};\n"
        };
    }

    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 void OnContextMenu(EditorMouseEvent eventArg)
    {
        Console.WriteLine("OnContextMenu : " + System.Text.Json.JsonSerializer.Serialize(eventArg));
    }

    private async Task ChangeTheme(ChangeEventArgs e)
    {
        Console.WriteLine($"setting theme to: {e.Value?.ToString()}");
        await BlazorMonaco.Editor.Global.SetTheme(jsRuntime, e.Value?.ToString());
    }

    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}");
    }

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

    private async Task AddAction()
    {
        var actionDescriptor = new ActionDescriptor
        {
            Id = "testAction",
            Label = "Test Action",
            Keybindings = new int[] { (int)KeyMod.CtrlCmd | (int)KeyCode.KeyB },
            ContextMenuGroupId = "navigation",
            ContextMenuOrder = 1.5f,
            Run = (editor) =>
            {
                Console.WriteLine("Ctrl+B : Editor action is triggered.");
            }
        };
        await _editor.AddAction(actionDescriptor);
    }

    private async Task RegisterCodeActionProvider()
    {
        // Set sample marker
        var model = await _editor.GetModel();
        var markers = new List<MarkerData>
        {
            new MarkerData
            {
                CodeAsObject = new MarkerCode
                {
                    TargetUri = "https://www.google.com",
                    Value = "my-value"
                },
                Message = "Marker example",
                Severity = MarkerSeverity.Warning,
                StartLineNumber = 4,
                StartColumn = 3,
                EndLineNumber = 4,
                EndColumn = 7
            }
        };
        await BlazorMonaco.Editor.Global.SetModelMarkers(jsRuntime, model, "default", markers);

        // Register quick fix for marker
        await BlazorMonaco.Languages.Global.RegisterCodeActionProvider(jsRuntime, "javascript", (modelUri, range, context) =>
        {
            var codeActionList = new CodeActionList();
            if (context.Markers.Count == 0)
                return codeActionList;

            codeActionList.Actions = new List<CodeAction>
            {
                new CodeAction
                {
                    Title = "Fix example",
                    Kind = "quickfix",
                    Diagnostics = markers,
                    Edit = new WorkspaceEdit
                    {
                        Edits = new List<IWorkspaceEdit>
                        {
                            new WorkspaceTextEdit
                            {
                                ResourceUri = modelUri,
                                TextEdit = new TextEditWithInsertAsSnippet
                                {
                                    Range = range,
                                    Text = "THIS"
                                }
                            }
                        }
                    },
                    IsPreferred = true
                }
            };
            return codeActionList;
        });
    }

    private async Task RegisterCompletionItemProvider()
    {
        // Register completion item to replace warning item
        await BlazorMonaco.Languages.Global.RegisterCompletionItemProvider(jsRuntime, "javascript", (modelUri, position, context) =>
        {
            var completionList = new CompletionList()
            {
                Suggestions = new List<CompletionItem>
                {
                    new CompletionItem
                    {
                        LabelAsString = "Replace by THIS",
                        Kind = CompletionItemKind.Variable,
                        Detail = "this -> THIS",
                        InsertText = "THIS",
                        Preselect = true,
                        RangeAsObject = new BlazorMonaco.Range
                        {
                            StartLineNumber = 4,
                            StartColumn = 3,
                            EndLineNumber = 4,
                            EndColumn = 7
                        }
                    }
                }
            };
            return completionList;
        });
    }
}